Updated webpack to rc.3 and new router

jd4u · Jun 23, 2016 · a4956b6 · a4956b6
1 parent 30163cb
commit a4956b6
Showing 13 changed files with 82 additions and 59 deletions.
diff --git a/webpack/package.json b/webpack/package.json
@@ -74,16 +74,15 @@
 
    },
   "dependencies": {
-    "@angular/http": "2.0.0-rc.2",
-    "@angular/common": "2.0.0-rc.2",
-    "@angular/compiler": "2.0.0-rc.2",
-    "@angular/core": "2.0.0-rc.2",
-    "@angular/forms": "^0.1.0",
-    "@angular/platform-browser": "2.0.0-rc.2",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.2",
-    "@angular/platform-server": "2.0.0-rc.2",
-    "@angular/router": "2.0.0-rc.2",
-    "@angular/router-deprecated": "2.0.0-rc.2",
+    "@angular/http": "2.0.0-rc.3",
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@angular/forms": "^0.1.1",
+    "@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",
 

diff --git a/webpack/src/app/app.component.ts b/webpack/src/app/app.component.ts
@@ -2,11 +2,7 @@
  * Angular 2 decorators and services
  */
 import {Component, ViewEncapsulation} from '@angular/core';
-import {RouteConfig} from '@angular/router-deprecated';
 
-import {Home} from './home';
-import {Ping} from './ping';
-import {Profile} from './profile';
 import {Auth} from './auth';
 
 /*
@@ -20,12 +16,6 @@ import {Auth} from './auth';
   template: require('./app.template.html'),
   styles: [`.btn-margin { margin-top: 5px}`]
 })
-@RouteConfig([
-  { path: '/',      name: 'Index', component: Home, useAsDefault: true },
-  { path: '/home',  name: 'Home',  component: Home },
-  { path: '/ping',  name: 'Ping',  component: Ping },
-  { path: '/profile',  name: 'Profile',  component: Profile }
-])
 export class App {
 
   constructor(private auth: Auth) {}

diff --git a/webpack/src/app/app.routes.ts b/webpack/src/app/app.routes.ts
@@ -0,0 +1,14 @@
+import { RouterConfig } from '@angular/router';
+import { Home } from './home';
+import { Ping } from './ping';
+import { Profile } from './profile';
+import { NoContent } from './no-content';
+import { AuthGuard } from './auth/auth.service';
+
+export const routes: RouterConfig = [
+  { path: '',      component: Home },
+  { path: 'home',  component: Home },
+  { path: 'ping', component: Ping },
+  { path: 'profile', component: Profile, canActivate: [AuthGuard] },
+  { path: '**',    component: NoContent },
+];
diff --git a/webpack/src/app/app.template.html b/webpack/src/app/app.template.html
@@ -2,11 +2,11 @@
   <div class="container-fluid">
     <div class="navbar-header">
       <a class="navbar-brand" href="#">Auth0 - Angular 2</a>
-      <button class="btn btn-primary btn-margin" [routerLink]=" ['Home'] ">Home</button>
-      <button class="btn btn-primary btn-margin" [routerLink]=" ['Ping'] ">Ping</button>
-      <button class="btn btn-primary btn-margin" [routerLink]=" ['Profile'] " *ngIf="auth.authenticated()">Profile</button>
-      <button class="btn btn-primary btn-margin" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</button>
-      <button class="btn btn-primary btn-margin" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</button>
+      <a class="btn btn-primary btn-margin" [routerLink]=" ['/home'] ">Home</a>
+      <a class="btn btn-primary btn-margin" [routerLink]=" ['/ping'] ">Ping</a>
+      <a class="btn btn-primary btn-margin" [routerLink]=" ['/profile'] " *ngIf="auth.authenticated()">Profile</a>
+      <a class="btn btn-primary btn-margin" (click)="auth.login()" *ngIf="!auth.authenticated()">Log In</a>
+      <a class="btn btn-primary btn-margin" (click)="auth.logout()" *ngIf="auth.authenticated()">Log Out</a>
     </div>
   </div>
 </nav>

diff --git a/webpack/src/app/auth/auth.service.ts b/webpack/src/app/auth/auth.service.ts
@@ -1,7 +1,7 @@
 import {Injectable, NgZone} from '@angular/core';
-import {Router} from '@angular/router-deprecated';
+import {Router, CanActivate} from '@angular/router';
 import {AuthHttp, tokenNotExpired} from 'angular2-jwt';
-import {Auth0Vars} from './../../../../auth0vars.ts';
+import {Auth0Vars} from './../../../../auth0vars';
 
 // Avoid name not found warnings
 declare var Auth0Lock: any;
@@ -42,6 +42,20 @@ export class Auth {
     localStorage.removeItem('profile');
     localStorage.removeItem('id_token');
     this.zoneImpl.run(() => this.user = null);
-    this.router.navigate(['Home']);
+    this.router.navigate(['/home']);
+  }
+}
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router) {}
+
+  canActivate() {
+    if (tokenNotExpired()) {
+      return true;
+    }
+
+    this.router.navigate(['/home']);
+    return false;
   }
 }
diff --git a/webpack/src/app/index.ts b/webpack/src/app/index.ts
@@ -3,10 +3,12 @@ export * from './app.component';
 export * from './app.service';
 
 import {AppState} from './app.service';
+import { AuthGuard } from './auth/auth.service';
 import {AUTH_PROVIDERS} from 'angular2-jwt';
 
 // Application wide providers
 export const APP_PROVIDERS = [
   AppState,
+  AuthGuard,
   AUTH_PROVIDERS
 ];
diff --git a/webpack/src/app/no-content/index.ts b/webpack/src/app/no-content/index.ts
@@ -0,0 +1 @@
+export * from './no-content';
diff --git a/webpack/src/app/no-content/no-content.ts b/webpack/src/app/no-content/no-content.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'no-content',
+  template: `
+    <div>
+      <h1>404: page missing</h1>
+    </div>
+  `
+})
+export class NoContent {
+
+}
diff --git a/webpack/src/app/profile/profile.component.ts b/webpack/src/app/profile/profile.component.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {CanActivate} from '@angular/router-deprecated';
 import {tokenNotExpired} from 'angular2-jwt';
 import {Auth} from '../auth/auth.service';
 
@@ -8,8 +7,6 @@ import {Auth} from '../auth/auth.service';
   template: require('./profile.template.html')
 })
 
-@CanActivate(() => tokenNotExpired())
-
 export class Profile {
 
   constructor(private auth: Auth) {}

diff --git a/webpack/src/platform/browser-directives.ts b/webpack/src/platform/browser-directives.ts
@@ -4,7 +4,7 @@
 
 import { PLATFORM_DIRECTIVES } from '@angular/core';
 // Angular 2 Router
-import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 // Angular 2 forms
 import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 

diff --git a/webpack/src/platform/browser-providers.ts b/webpack/src/platform/browser-providers.ts
@@ -7,20 +7,24 @@ import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 // Angular 2 Http
 import { HTTP_PROVIDERS } from '@angular/http';
 // Angular 2 Router
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { provideRouter } from '@angular/router';
 // Angular 2 forms
 import { disableDeprecatedForms, provideForms } from '@angular/forms';
 /*
 * Application Providers/Directives/Pipes
 * providers/directives/pipes that only live in our browser environment
 */
+
+import { routes } from '../app/app.routes';
+
 export const APPLICATION_PROVIDERS = [
   // new Angular 2 forms
   disableDeprecatedForms(),
   provideForms(),
 
+  provideRouter(routes),
+
   ...HTTP_PROVIDERS,
-  ...ROUTER_PROVIDERS,
   { provide: LocationStrategy, useClass: HashLocationStrategy }
 ];
 

diff --git a/webpack/src/platform/environment.ts b/webpack/src/platform/environment.ts
@@ -1,42 +1,30 @@
-
 // Angular 2
 // rc2 workaround
-import { enableProdMode as enableProdMode0 } from '@angular/core/src/facade/lang';
-import { enableProdMode as enableProdMode1 } from '@angular/compiler/src/facade/lang';
-import { enableProdMode as enableProdMode2 } from '@angular/platform-browser/src/facade/lang';
-import { CompilerConfig } from '@angular/compiler';
-import { PLATFORM_DIRECTIVES, PLATFORM_PIPES } from '@angular/core';
+import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
 // Environment Providers
 let PROVIDERS = [
   // common env directives
 ];
 
+// Angular debug tools in the dev console
+// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
+let _decorateComponentRef = function identity(value) { return value; };
+
 if ('production' === ENV) {
   // Production
-  enableProdMode0();
-  enableProdMode1();
-  enableProdMode2();
+  disableDebugTools();
+  enableProdMode();
 
   PROVIDERS = [
     ...PROVIDERS,
-    // rc2 workaround
-    {
-      provide: CompilerConfig,
-      useFactory: (platformDirectives: any[], platformPipes: any[]) => {
-        let compiler = new CompilerConfig({
-          genDebugInfo: true,
-          logBindingUpdate: true,
-          platformPipes,
-          platformDirectives
-        });
-        return compiler;
-      },
-      deps: [PLATFORM_DIRECTIVES, PLATFORM_PIPES]
-    },
     // custom providers in production
   ];
 
 } else {
+
+  _decorateComponentRef = (cmpRef) => enableDebugTools(cmpRef);
+
   // Development
   PROVIDERS = [
     ...PROVIDERS,
@@ -45,7 +33,8 @@ if ('production' === ENV) {
 
 }
 
+export const decorateComponentRef = _decorateComponentRef;
 
 export const ENV_PROVIDERS = [
   ...PROVIDERS
-];
+];
diff --git a/webpack/src/vendor.browser.ts b/webpack/src/vendor.browser.ts
@@ -10,7 +10,7 @@ import '@angular/core';
 import '@angular/common';
 import '@angular/forms';
 import '@angular/http';
-import '@angular/router-deprecated';
+import '@angular/router';
 
 // RxJS
 import 'rxjs/add/operator/map';