(fix) Update to work with agular2 beta 0

auth0-blog · poshwee · Jun 13, 2015 · Jun 15, 2015 · Jul 7, 2015 · Jul 7, 2015
commit 9a80ef0a448e5aba926cde53a07bbdcfea122f95
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,6 @@
+# v0.0.1 - Update to Angular 2 Beta (2016-01-07)
+
+* Upgraded to work with Angular 2 Beta 0
+* Removed Fetch API in favor of Angular 2 Http
+* Included [angular2-jwt](https://github.com/auth0/angular2-jwt) for authenticated API calls
+
diff --git a/LICENSE → LICENSE.txt b/LICENSE → LICENSE.txt
diff --git a/index.html b/index.html
@@ -11,8 +11,7 @@
   <base href="/">
   <!-- styles -->
   <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.css">
-  <!-- Angular 2 -->
-  <script type="text/javascript" src="/node_modules/whatwg-fetch/fetch.js"></script>
+  <!-- Util -->
   <script type="text/javascript" src="/node_modules/jwt-decode/build/jwt-decode.js"></script>
 </head>
 <body>
@@ -24,7 +23,7 @@
   <!-- Commmon files to be cached -->
   <script src="/build/common.js"></script>
   <!-- Angular2 files -->
-  <script src="/build/angular2.js"></script>
+  <script src="/build/vendor.js"></script>
   <!-- App script -->
   <script src="/build/app.js"></script></body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular2-authentication-sample",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "This is a sample that shows how to add authentication to an Angular 2 (ng2) app",
   "main": "",
   "scripts": {
@@ -15,40 +15,43 @@
   },
   "contributors": [
     "Martin Gontovnikas (http://gon.to) <[email protected]>",
-    "PatrickJS <[email protected]>"
+    "PatrickJS <[email protected]>",
+    "Ryan Chenkie <[email protected]>"
   ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/auth0/angular2-authentication-sample/issues"
   },
   "homepage": "https://github.com/auth0/angular2-authentication-sample",
   "dependencies": {
-    "angular2": "2.0.0-alpha.44",
-    "raw-loader": "0.5.1",
-    "reflect-metadata": "0.1.2",
-    "rtts_assert": "2.0.0-alpha.37",
-    "rx": "4.0.6",
-    "zone.js": "0.5.8",
-    "bootstrap": "3.3.5",
-    "jwt-decode": "1.4.0",
-    "whatwg-fetch": "0.10.0",
-    "when": "3.7.3"
+    "angular2": "2.0.0-beta.0",
+    "angular2-jwt": "0.1.4",
+    "bootstrap": "^3.3.6",
+    "es6-promise": "^3.0.2",
+    "es6-shim": "^0.33.3",
+    "es7-reflect-metadata": "^1.4.0",
+    "jwt-decode": "^1.5.0",
+    "rxjs": "5.0.0-beta.0",
+    "zone.js": "0.5.10"
   },
   "devDependencies": {
-    "css-loader": "0.20.1",
+    "css-loader": "^0.23.0",
     "exports-loader": "0.6.2",
-    "expose-loader": "0.7.0",
-    "file-loader": "0.8.4",
-    "html-webpack-plugin": "1.6.2",
-    "imports-loader": "0.6.5",
-    "json-loader": "0.5.3",
-    "loader-utils": "0.2.11",
-    "style-loader": "0.12.4",
-    "ts-loader": "0.5.6",
-    "typescript": "1.6.2",
-    "url-loader": "0.5.6",
-    "webpack": "1.12.2",
-    "webpack-dev-server": "1.12.1",
-    "xtend": "4.0.0"
+    "expose-loader": "^0.7.1",
+    "file-loader": "^0.8.4",
+    "imports-loader": "^0.6.4",
+    "json-loader": "^0.5.3",
+    "raw-loader": "0.5.1",
+    "style-loader": "^0.13.0",
+    "ts-loader": "^0.7.2",
+    "tsconfig-lint": "^0.2.0",
+    "tslint": "^3.2.0",
+    "tslint-loader": "^2.1.0",
+    "typedoc": "^0.3.12",
+    "typescript": "^1.7.3",
+    "typings": "^0.3.1",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.12.9",
+    "webpack-dev-server": "^1.12.1"
   }
 }
diff --git a/src/app/LoggedInOutlet.ts b/src/app/LoggedInOutlet.ts
@@ -1,16 +1,16 @@
-import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
+import {Directive, Attribute, ElementRef, DynamicComponentLoader} from 'angular2/core';
 import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';
 import {Login} from '../login/login';
 
 @Directive({
   selector: 'router-outlet'
 })
 export class LoggedInRouterOutlet extends RouterOutlet {
-  publicRoutes:any;
-  private parentRouter:Router;
+  publicRoutes: any;
+  private parentRouter: Router;
 
-  constructor(_elementRef:ElementRef, _loader:DynamicComponentLoader,
-              _parentRouter:Router, @Attribute('name') nameAttr:string) {
+  constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
+              _parentRouter: Router, @Attribute('name') nameAttr: string) {
     super(_elementRef, _loader, _parentRouter, nameAttr);
 
     this.parentRouter = _parentRouter;

diff --git a/src/app/app.ts b/src/app/app.ts
@@ -1,4 +1,4 @@
-import {View, Component} from 'angular2/angular2';
+import {View, Component} from 'angular2/core';
 import {Location, RouteConfig, RouterLink, Router} from 'angular2/router';
 
 import {LoggedInRouterOutlet} from './LoggedInOutlet';
@@ -8,7 +8,6 @@ import {Signup} from '../signup/signup';
 
 let template = require('./app.html');
 
-
 @Component({
   selector: 'auth-app'
 })
@@ -17,11 +16,12 @@ let template = require('./app.html');
   directives: [ LoggedInRouterOutlet ]
 })
 @RouteConfig([
-  { path: '/',       redirectTo: '/home' },
-  { path: '/home',   as: 'Home',   component: Home },
-  { path: '/login',  as: 'Login',  component: Login },
-  { path: '/signup', as: 'Signup', component: Signup }
+  { path: '/', redirectTo: ['/Home'] },
+  { path: '/home', component: Home, as: 'Home' },
+  { path: '/login', component: Login, as: 'Login' },
+  { path: '/signup', component: Signup, as: 'Signup' }
 ])
+
 export class App {
   constructor(public router: Router) {
   }

diff --git a/src/common/BrowserDomAdapter.ts b/src/common/BrowserDomAdapter.ts
diff --git a/src/common/headers.ts b/src/common/headers.ts
@@ -0,0 +1,5 @@
+import { Headers } from 'angular2/http';
+
+export const contentHeaders = new Headers();
+contentHeaders.append('Accept', 'application/json');
+contentHeaders.append('Content-Type', 'application/json');
diff --git a/src/common/jitInjectables.ts b/src/common/jitInjectables.ts
diff --git a/src/home/home.html b/src/home/home.html
@@ -1,14 +1,14 @@
 <div>
   <div class="home jumbotron centered">
     <h1>Welcome to the angular2 authentication sample!</h1>
-    <h2 *ng-if="jwt">Your JWT is:</h2>
-    <pre *ng-if="jwt" class="jwt"><code>{{ jwt }}</code></pre>
-    <pre *ng-if="jwt" class="jwt"><code>{{ decodedJwt | json }}</code></pre>
+    <h2 *ngIf="jwt">Your JWT is:</h2>
+    <pre *ngIf="jwt" class="jwt"><code>{{ jwt }}</code></pre>
+    <pre *ngIf="jwt" class="jwt"><code>{{ decodedJwt | json }}</code></pre>
     <p>Click any of the buttons to call an API and get a response</p>
     <p><a class="btn btn-primary btn-lg" role="button" (click)="callAnonymousApi()">Call Anonymous API</a></p>
     <p><a class="btn btn-primary btn-lg" role="button" (click)="callSecuredApi()">Call Secure API</a></p>
     <p><a class="btn btn-primary btn-lg" role="button" (click)="logout()">Logout</a></p>
-    <h2 *ng-if="response">The response of calling the <span class="red">{{api}}</span> API is:</h2>
-    <h3 *ng-if="response">{{response}}</h3>
+    <h2 *ngIf="response">The response of calling the <span class="red">{{api}}</span> API is:</h2>
+    <h3 *ngIf="response">{{response}}</h3>
   </div>
 </div>
diff --git a/src/home/home.ts b/src/home/home.ts
@@ -1,8 +1,9 @@
-import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import { Component, View } from 'angular2/core';
+import { CORE_DIRECTIVES } from 'angular2/common';
+import { Http, Headers } from 'angular2/http';
+import { AuthHttp } from 'angular2-jwt';
 import { Router } from 'angular2/router';
 
-import {status, text} from '../utils/fetch'
-
 let styles = require('./home.css');
 let template = require('./home.html');
 
@@ -16,12 +17,12 @@ let template = require('./home.html');
   styles: [styles]
 })
 export class Home {
-  jwt:string;
-  decodedJwt:string;
-  response:string;
-  api:string;
+  jwt: string;
+  decodedJwt: string;
+  response: string;
+  api: string;
 
-  constructor(public router:Router) {
+  constructor(public router: Router, public http: Http, public authHttp: AuthHttp) {
     this.jwt = localStorage.getItem('jwt');
     this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
   }
@@ -41,22 +42,21 @@ export class Home {
 
   _callApi(type, url) {
     this.response = null;
-    this.api = type;
-    window.fetch(url, {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-          'Authorization': 'bearer ' + this.jwt
-        }
-      })
-      .then(status)
-      .then(text)
-      .then((response) => {
-        this.response = response;
-      })
-      .catch((error) => {
-        this.response = error.message;
-      });
+    if (type === 'Anonymous') {
+      // For non-protected routes, just use Http
+      this.http.get(url)
+        .subscribe(
+          response => this.response = response.text(),
+          error => this.response = error.json().message
+        );
+    }
+    if (type === 'Secured') {
+      // For protected routes, use AuthHttp
+      this.authHttp.get(url)
+        .subscribe(
+          response => this.response = response.text(),
+          error => this.response = error.json().message
+        );
+    }
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,9 @@
-import { bootstrap, FORM_PROVIDERS } from 'angular2/angular2';
+import { bootstrap } from 'angular2/platform/browser';
+import { provide } from 'angular2/core';
+import { FORM_PROVIDERS } from 'angular2/common';
 import { ROUTER_PROVIDERS } from 'angular2/router';
-import { HTTP_PROVIDERS } from 'angular2/http';
+import { Http, HTTP_PROVIDERS } from 'angular2/http';
+import { AuthConfig, AuthHttp } from 'angular2-jwt';
 
 import { App } from './app/app';
 
@@ -9,6 +12,14 @@ bootstrap(
   [
     FORM_PROVIDERS,
     ROUTER_PROVIDERS,
-    HTTP_PROVIDERS
+    HTTP_PROVIDERS,
+    provide(AuthHttp, {
+      useFactory: (http) => {
+        return new AuthHttp(new AuthConfig({
+          tokenName: 'jwt'
+        }), http);
+      },
+      deps: [Http]
+    })
   ]
 );
diff --git a/src/login/login.ts b/src/login/login.ts
@@ -1,6 +1,8 @@
-import {Component, View} from 'angular2/angular2';
+import { Component, View } from 'angular2/core';
 import { Router, RouterLink } from 'angular2/router';
-import {status, json} from '../utils/fetch'
+import { CORE_DIRECTIVES, FORM_DIRECTIVES } from 'angular2/common';
+import { Http, Headers } from 'angular2/http';
+import { contentHeaders } from '../common/headers';
 
 let styles   = require('./login.css');
 let template = require('./login.html');
@@ -9,36 +11,28 @@ let template = require('./login.html');
   selector: 'login'
 })
 @View({
-  directives: [RouterLink],
+  directives: [RouterLink, CORE_DIRECTIVES, FORM_DIRECTIVES ],
   template: template,
   styles: [ styles ]
 })
 export class Login {
-  constructor(public router: Router) {
+  constructor(public router: Router, public http: Http) {
   }
 
   login(event, username, password) {
     event.preventDefault();
-    window.fetch('http://localhost:3001/sessions/create', {
-      method: 'POST',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        username, password
-      })
-    })
-    .then(status)
-    .then(json)
-    .then((response:any) => {
-      localStorage.setItem('jwt', response.id_token);
-      this.router.parent.navigateByUrl('/home');
-    })
-    .catch((error) => {
-      alert(error.message);
-      console.log(error.message);
-    });
+    let body = JSON.stringify({ username, password });
+    this.http.post('http://localhost:3001/sessions/create', body, { headers: contentHeaders })
+      .subscribe(
+        response => {
+          localStorage.setItem('jwt', response.json().id_token);
+          this.router.parent.navigateByUrl('/home');
+        },
+        error => {
+          alert(error.json().message);
+          console.log(error.json().message);
+        }
+      );
   }
 
   signup(event) {