Merge pull request auth0-blog#77 from blacksonic/master

Upgrade to Angular 2 final and update articles section in readme

Author: chenkie

Readme.md

@@ -6,7 +6,11 @@ This sample shows how to create an angular 2 app that:
 * **Calls APIs** authenticated and not.
 * Extends the **RouterOutlet** for route pipeline changes.
 
-> You can **learn more about how it works [in this blogpost](https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/)**
+You can **learn more about how it works in the following blogposts**
+
+* [Angular 2 Authentication Tutorial](https://auth0.com/blog/angular-2-authentication/)
+* [Protecting Routes using Guards in Angular 2](http://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html)
+* [Angular 2 authentication revisited](https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9)
 
 ## Running it
 

package.json

@@ -24,26 +24,24 @@
   },
   "homepage": "https://github.com/auth0/angular2-authentication-sample",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.3",
-    "@angular/compiler": "2.0.0-rc.3",
-    "@angular/core": "2.0.0-rc.3",
-    "@angular/http": "2.0.0-rc.3",
-    "@angular/platform-browser": "2.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
-    "@angular/platform-server": "2.0.0-rc.3",
-    "@angular/router": "3.0.0-alpha.7",
-    "angular2-jwt": "0.1.16",
-    "bootstrap": "^3.3.6",
-    "core-js": "^2.4.0",
-    "es6-promise": "^3.1.2",
-    "es6-shim": "^0.33.13",
-    "es7-reflect-metadata": "^1.6.0",
+    "@angular/common": "2.0.1",
+    "@angular/compiler": "2.0.1",
+    "@angular/core": "2.0.1",
+    "@angular/forms": "2.0.1",
+    "@angular/http": "2.0.1",
+    "@angular/platform-browser": "2.0.1",
+    "@angular/platform-browser-dynamic": "2.0.1",
+    "@angular/platform-server": "2.0.1",
+    "@angular/router": "3.0.1",
+    "angular2-jwt": "0.1.23",
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
     "jwt-decode": "^2.0.1",
-    "rxjs": "5.0.0-beta.6",
-    "zone.js": "~0.6.12"
+    "rxjs": "5.0.0-beta.12",
+    "zone.js": "~0.6.25"
   },
   "devDependencies": {
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.25.0",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
     "file-loader": "^0.9.0",
@@ -52,14 +50,14 @@
     "raw-loader": "^0.5.1",
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.1",
-    "tsconfig-lint": "^0.7.0",
+    "tsconfig-lint": "^0.12.0",
     "tslint": "^3.7.1",
     "tslint-loader": "^2.1.3",
     "typedoc": "^0.4.3",
-    "typescript": "~1.8.10",
+    "typescript": "~2.0.3",
     "typings": "^1.3.0",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.1"
   }
 }

src/app.module.ts

@@ -0,0 +1,32 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+import { HttpModule } from '@angular/http';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+
+import { AUTH_PROVIDERS } from 'angular2-jwt';
+
+import { AuthGuard } from './common/auth.guard';
+import { Home } from './home';
+import { Login } from './login';
+import { Signup } from './signup';
+import { App } from './app';
+
+import { routes } from './app.routes';
+
+@NgModule({
+  bootstrap: [App],
+  declarations: [
+    Home, Login, Signup, App
+  ],
+  imports: [
+    HttpModule, BrowserModule, FormsModule,
+    RouterModule.forRoot(routes, {
+      useHash: true
+    })
+  ],
+  providers: [
+    AuthGuard, ...AUTH_PROVIDERS
+  ]
+})
+export class AppModule {}

src/app.routes.ts

@@ -1,11 +1,11 @@
-import { RouterConfig } from '@angular/router';
+import { Routes } from '@angular/router';
 import { Home } from './home';
 import { Login } from './login';
 import { Signup } from './signup';
 import { AuthGuard } from './common/auth.guard';
 
-export const routes: RouterConfig = [
-  { path: '',       component:  Login },
+export const routes: Routes = [
+  { path: '',       component: Login },
   { path: 'login',  component: Login },
   { path: 'signup', component: Signup },
   { path: 'home',   component: Home, canActivate: [AuthGuard] },

src/app.ts

@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
+import { Router } from '@angular/router';
 
 const template = require('./app.html');
 
 @Component({
   selector: 'auth-app',
-  template: template,
-  directives: [ ROUTER_DIRECTIVES ]
+  template: template
 })
 
 export class App {

src/home/home.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
-import { CORE_DIRECTIVES } from '@angular/common';
-import { Http, Headers } from '@angular/http';
+import { Http } from '@angular/http';
 import { Router } from '@angular/router';
 import { AuthHttp } from 'angular2-jwt';
 
@@ -9,7 +8,6 @@ const template = require('./home.html');
 
 @Component({
   selector: 'home',
-  directives: [ CORE_DIRECTIVES ],
   template: template,
   styles: [ styles ]
 })
@@ -26,7 +24,7 @@ export class Home {
 
   logout() {
     localStorage.removeItem('id_token');
-    this.router.navigate(['/login']);
+    this.router.navigate(['login']);
   }
 
   callAnonymousApi() {

src/index.ts

@@ -1,20 +1,5 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { provideRouter } from '@angular/router';
-import { FORM_PROVIDERS } from '@angular/common';
-import { HTTP_PROVIDERS } from '@angular/http';
-import { AUTH_PROVIDERS } from 'angular2-jwt';
-import { AuthGuard } from './common/auth.guard';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { App } from './app';
-import { routes } from './app.routes';
+import { AppModule } from './app.module';
 
-bootstrap(
-  App,
-  [
-    provideRouter(routes),
-    FORM_PROVIDERS,
-    HTTP_PROVIDERS,
-    AUTH_PROVIDERS,
-    AuthGuard
-  ]
-);
+platformBrowserDynamic().bootstrapModule(AppModule);

src/login/login.ts

@@ -1,15 +1,13 @@
 import { Component } from '@angular/core';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router';
-import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
-import { Http, Headers } from '@angular/http';
+import { Router } from '@angular/router';
+import { Http } from '@angular/http';
 import { contentHeaders } from '../common/headers';
 
 const styles   = require('./login.css');
 const template = require('./login.html');
 
 @Component({
   selector: 'login',
-  directives: [ ROUTER_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES ],
   template: template,
   styles: [ styles ]
 })
@@ -24,7 +22,7 @@ export class Login {
       .subscribe(
         response => {
           localStorage.setItem('id_token', response.json().id_token);
-          this.router.navigate(['/home']);
+          this.router.navigate(['home']);
         },
         error => {
           alert(error.text());
@@ -35,6 +33,6 @@ export class Login {
 
   signup(event) {
     event.preventDefault();
-    this.router.navigate(['/signup']);
+    this.router.navigate(['signup']);
   }
 }

src/signup/signup.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
-import { CORE_DIRECTIVES, FORM_DIRECTIVES } from '@angular/common';
 import { Http } from '@angular/http';
 import { contentHeaders } from '../common/headers';
 
@@ -9,7 +8,6 @@ const template = require('./signup.html');
 
 @Component({
   selector: 'signup',
-  directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES ],
   template: template,
   styles: [ styles ]
 })
@@ -24,7 +22,7 @@ export class Signup {
       .subscribe(
         response => {
           localStorage.setItem('id_token', response.json().id_token);
-          this.router.navigate(['/home']);
+          this.router.navigate(['home']);
         },
         error => {
           alert(error.text());
@@ -35,7 +33,7 @@ export class Signup {
 
   login(event) {
     event.preventDefault();
-    this.router.navigate(['/login']);
+    this.router.navigate(['login']);
   }
 
 }

webpack.config.js

@@ -13,8 +13,7 @@ module.exports = {
   entry: {
     'vendor': [
       // Polyfills
-      'core-js/es6',
-      'core-js/es7/reflect',
+      'core-js/client/shim',
       'zone.js/dist/zone',
       'zone.js/dist/long-stack-trace-zone',
       // Angular2
@@ -88,7 +87,7 @@ module.exports = {
      /zone\.js\/dist\/.+/,
      /reflect-metadata/,
      /es(6|7)-.+/,
-     /.zone-microtask/, 
+     /.zone-microtask/,
      /.long-stack-trace-zone/
     ]
   },
@@ -97,13 +96,13 @@ module.exports = {
     new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js', minChunks: Infinity }),
     new CommonsChunkPlugin({ name: 'common', filename: 'common.js', minChunks: 2, chunks: ['app', 'vendor'] })
   ],
-  
+
   // Other module loader config
   tslint: {
     emitErrors: false,
     failOnHint: false
   },
-  
+
   // our Development Server configs
   // our Webpack Development Server config
   devServer: {