Today I’m happy to announce the first (beta) release of Stormpath’s Angular 2 support! The npm module is called angular-stormpath and you can easily installing it using npm install --save angular-stormpath. If you’d like to try Angular 2 with Stormpath without writing any code, you can checkout the project from GitHub and run its demo. You will need to have your Stormpath API key setup for this to work.

If you’d like to learn how to integrate our Angular 2 components into your own application, continue reading!

What Is Stormpath?

Stormpath is an API service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. We make user account management a lot easier, more secure, and infinitely scalable. To get started register for a free account.

Create an Angular 2 Application with Express

To see how you might use this in a simple Angular 2 application, create a new application with Angular CLI. First, you’ll need to install Angular CLI.

After this command completes, you can create a new application.

The reason I included “express” in the project name is because Stormpath currently requires one of our backend integrations to communicate with Stormpath’s API. For this example, you’ll use express-stormpath.

ng new

From the command line, cd into angular2-express-stormpath-example and run ng serve. In another terminal window, run ng e2e to run Protractor tests. All tests should pass and you should see results like the following.

ng e2e

Integrate Stormpath’s Angular 2 Support

Add angular-stormpath to the project:

In src/app/app.component.html, add HTML that shows a welcome message to the user when they’re logged in. When they’re not logged in, the <sp-authport></sp-authport> component will render forms to register, login, and retrieve forgotten passwords.

In src/app/app.component.ts, add the following variables, constructor, and methods to the body of AppComponent:

If you run npm start and view http://localhost:4200 in your browser, you’ll see “Loading…”, but nothing renders. A quick check of the console will show you errors about sp-authport not being a known element.

sp-authport error

This happens because Stormpath’s Angular 2 components haven’t been imported into the application’s module. Open src/app/app.module.ts and import StormpathModule.

Now the app should launch correctly, but you’ll see a 404 in your console for the /me endpoint.

/me 404

Install Stormpath’s Express Support

To fix this, install express-stormpath:

Create a server directory and a server.js file in it. In this file, create an Express application and protect it with Stormpath.

This will now service the Stormpath endpoints (e.g. /login, /logout, /me) on port 3000 when it’s started. However, since Angular CLI runs on port 4200, you have to proxy these requests.

Proxy Requests to Express

Create a proxy.conf.json file in the root directory of the project to contain proxy definitions.

Next, change package.json to modify npm start to start express and run ng serve with proxy support.

You’ll need to install concurrently to make this command work.

Run npm start and you should be able to navigate between Login, Register, and Forgot Password in your browser. The forms won’t be pretty though. You can make them look good by adding Bootstrap to src/index.html.

login

register forgot password

If you haven’t registered for Stormpath, you’ll see an error like the following when you run npm start. The Quickstart guide for Stormpath’s Node.js integration explains how to register and create an API key pair.

No API Key Error

Fix Tests

If you try to run npm test or ng test, tests will fail with the same error you saw before:

The first step to fixing this is to import StormpathModule into src/app/app.component.spec.ts.

This will get you a bit further, but there will be an error about the /me endpoint not being found.

To workaround this, you can override the Angular’s Http dependency and mock out its backend.

After making these changes, you should see the sweet smell of success.

Protractor tests should still work as well. You can prove this by running npm start in one terminal and npm run e2e in another.

Kudos

Thanks to Stormpath’s Robert Damphousse for providing a preview of Angular 2 support and writing most of the code in this release. I’d also like to thank Matt Lewis for his generator-angular2-module. Matt’s library made it easy to create this module and he was a great help in getting tests to work.

Angular 2 + Express Source Code

A completed version of the application created in this blog post is available on GitHub.

I hope you’ve enjoyed this quick tour of our Angular 2 support. If you have any questions about features or our roadmap going forward, please hit me up on Twitter, leave a comment below, or open an issue on GitHub.