From d7c6052a7aab7f6ab31cb7c8d1c7292269967c18 Mon Sep 17 00:00:00 2001 From: blacksonic Date: Sun, 2 Oct 2016 15:33:26 +0200 Subject: [PATCH] Upgrade to Angular 2 final and update articles section in readme --- Readme.md | 6 +++++- package.json | 40 +++++++++++++++++++--------------------- src/app.module.ts | 32 ++++++++++++++++++++++++++++++++ src/app.routes.ts | 6 +++--- src/app.ts | 5 ++--- src/home/home.ts | 6 ++---- src/index.ts | 21 +++------------------ src/login/login.ts | 10 ++++------ src/signup/signup.ts | 6 ++---- webpack.config.js | 9 ++++----- 10 files changed, 76 insertions(+), 65 deletions(-) create mode 100644 src/app.module.ts diff --git a/Readme.md b/Readme.md index af2f467..a4413c7 100644 --- a/Readme.md +++ b/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 diff --git a/package.json b/package.json index 7bdc152..41e4e4a 100644 --- a/package.json +++ b/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" } } diff --git a/src/app.module.ts b/src/app.module.ts new file mode 100644 index 0000000..7cc1f7c --- /dev/null +++ b/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 {} diff --git a/src/app.routes.ts b/src/app.routes.ts index f33e684..efc3c31 100644 --- a/src/app.routes.ts +++ b/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] }, diff --git a/src/app.ts b/src/app.ts index 0b5e207..16cd47d 100644 --- a/src/app.ts +++ b/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 { diff --git a/src/home/home.ts b/src/home/home.ts index bc6bb3e..2b13d92 100644 --- a/src/home/home.ts +++ b/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() { diff --git a/src/index.ts b/src/index.ts index 6b59f97..6af7a5b 100644 --- a/src/index.ts +++ b/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); diff --git a/src/login/login.ts b/src/login/login.ts index 09a8b59..4033e6d 100644 --- a/src/login/login.ts +++ b/src/login/login.ts @@ -1,7 +1,6 @@ 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'); @@ -9,7 +8,6 @@ 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']); } } diff --git a/src/signup/signup.ts b/src/signup/signup.ts index df51196..3a3c3df 100644 --- a/src/signup/signup.ts +++ b/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']); } } diff --git a/webpack.config.js b/webpack.config.js index 815e767..87bf2aa 100644 --- a/webpack.config.js +++ b/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: {