Merge pull request #4 from christophercr/master

feat(routing): replace Angular Router by UI Router + visualizer

dist/packages/stark-build/config/webpack.dev.js

@@ -50,7 +50,7 @@ module.exports = function () {
     "form-action 'self' " + webpackCustomConfig["cspFormAction"],
     "frame-src 'self'",   // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported
     "frame-ancestors 'none'",  // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY)
-    "img-src 'self'",
+    "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images
     "media-src 'self'",
     "object-src 'self'",
     "plugin-types application/pdf",  // valid mime-types for plugins invoked via <object> and <embed>

packages/build/config/webpack.dev.js

@@ -50,12 +50,12 @@ module.exports = function () {
     "form-action 'self' " + webpackCustomConfig["cspFormAction"],
     "frame-src 'self'",   // deprecated. Use child-src instead. Used here because child-src is not yet supported by Firefox. Remove as soon as it is fully supported
     "frame-ancestors 'none'",  // the app will not be allowed to be embedded in an iframe (roughly equivalent to X-Frame-Options: DENY)
-    "img-src 'self'",
+    "img-src 'self' data: image/png", // data: image/png is due to ui-router visualizer loading PNG images
     "media-src 'self'",
     "object-src 'self'",
     "plugin-types application/pdf",  // valid mime-types for plugins invoked via <object> and <embed>
     // "script-src 'self'", // FIXME: enable as soon as the issue is fixed in Angular (https://github.com/angular/angular-cli/issues/6872 )
-    // "style-src 'self' 'nonce-cef324d21ec5483c8819cc7a5e33c4a2'" // we define the same nonce value as in the style-loader // FIXME: DomSharedStylesHost.prototype._addStylesToHost in platform-browser.js adds inline style!
+    // "style-src 'self' 'nonce-uiroutervisualizer' 'nonce-cef324d21ec5483c8819cc7a5e33c4a2'" // we define the same nonce value as in the style-loader // FIXME: DomSharedStylesHost.prototype._addStylesToHost in platform-browser.js adds inline style!
   ];
 
   return webpackMerge(commonConfig({ENV: ENV, metadata: METADATA}), {

starter/package.json

@@ -84,6 +84,7 @@
   },
   "dependencies": {
     "@angular/animations": "5.2.3",
+    "@angular/cli": "1.6.7",
     "@angular/common": "5.2.3",
     "@angular/compiler": "5.2.3",
     "@angular/core": "5.2.3",
@@ -92,9 +93,10 @@
     "@angular/platform-browser-dynamic": "5.2.3",
     "@angular/platform-server": "5.2.3",
     "@angular/router": "5.2.3",
-    "@angular/cli": "1.6.7",
     "@nationalbankbelgium/angular-mdi-svg": "1.5.0",
     "@nationalbankbelgium/stark-build": "file:../dist/packages/stark-build/nationalbankbelgium-stark-build-0.0.0-PLACEHOLDER.tgz",
+    "@uirouter/angular": "1.0.1",
+    "@uirouter/visualizer": "6.0.0",
     "core-js": "2.5.3",
     "http-server": "^0.10.0",
     "ie-shim": "^0.1.0",

starter/src/app/+barrel/+child-barrel/child-barrel.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { UIRouterModule } from '@uirouter/angular';
 
-import { routes } from './child-barrel.routes';
+import { CHILD_BARREL_STATES } from './child-barrel.routes';
 import { ChildBarrelComponent } from './child-barrel.component';
+import { routerChildConfigFn } from '../../router.config';
 
 console.log('`ChildBarrel` bundle loaded asynchronously');
 
@@ -18,9 +19,12 @@ console.log('`ChildBarrel` bundle loaded asynchronously');
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule.forChild(routes),
+    UIRouterModule.forChild({
+      states: CHILD_BARREL_STATES,
+      config: routerChildConfigFn
+    }),
   ],
 })
 export class ChildBarrelModule {
-  public static routes = routes;
+  public static routes = CHILD_BARREL_STATES;
 }

starter/src/app/+barrel/+child-barrel/child-barrel.routes.ts

@@ -1,5 +1,6 @@
 import { ChildBarrelComponent } from './child-barrel.component';
+import { Ng2StateDeclaration } from '@uirouter/angular';
 
-export const routes = [
-  { path: '', component: ChildBarrelComponent,  pathMatch: 'full' },
+export const CHILD_BARREL_STATES: Ng2StateDeclaration[] = [
+  { name: 'childBarrel', url: '/child-barrel', parent: 'barrel', component: ChildBarrelComponent },
 ];

starter/src/app/+barrel/barrel.component.ts

@@ -15,11 +15,11 @@ console.log('`Barrel` component loaded asynchronously');
   template: `
     <h1>Hello from Barrel</h1>
     <span>
-      <a [routerLink]=" ['./child-barrel'] ">
+      <a uiSref="childBarrel">
         Child Barrel
       </a>
     </span>
-    <router-outlet></router-outlet>
+    <ui-view></ui-view>
   `,
 })
 export class BarrelComponent implements OnInit {

starter/src/app/+barrel/barrel.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { UIRouterModule } from '@uirouter/angular';
 
-import { routes } from './barrel.routes';
+import { BARREL_STATES } from './barrel.routes';
 import { BarrelComponent } from './barrel.component';
+import { routerChildConfigFn } from '../router.config';
 
 console.log('`Barrel` bundle loaded asynchronously');
 
@@ -18,9 +19,12 @@ console.log('`Barrel` bundle loaded asynchronously');
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule.forChild(routes),
+    UIRouterModule.forChild({
+      states: BARREL_STATES,
+      config: routerChildConfigFn
+    }),
   ],
 })
 export class BarrelModule {
-  public static routes = routes;
+  public static routes = BARREL_STATES;
 }

starter/src/app/+barrel/barrel.routes.ts

@@ -1,8 +1,11 @@
 import { BarrelComponent } from './barrel.component';
+import { Ng2StateDeclaration } from '@uirouter/angular';
 
-export const routes = [
-  { path: '', children: [
-    { path: '', component: BarrelComponent },
-    { path: 'child-barrel', loadChildren: './+child-barrel#ChildBarrelModule' }
-  ]},
+export const BARREL_STATES: Ng2StateDeclaration[] = [
+    {name: 'barrel', url: '/barrel', component: BarrelComponent},
+    {
+        name: 'childBarrel.**',
+        url: '/child-barrel',
+        loadChildren: './+child-barrel/child-barrel.module#ChildBarrelModule'
+    }
 ];

starter/src/app/+detail/+child-detail/child-detail.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { UIRouterModule } from '@uirouter/angular';
 
-import { routes } from './child-detail.routes';
+import { CHILD_DETAIL_STATES } from './child-detail.routes';
 import { ChildDetailComponent } from './child-detail.component';
+import { routerChildConfigFn } from '../../router.config';
 
 console.log('`ChildDetail` bundle loaded asynchronously');
 
@@ -18,9 +19,12 @@ console.log('`ChildDetail` bundle loaded asynchronously');
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule.forChild(routes),
+    UIRouterModule.forChild({
+      states: CHILD_DETAIL_STATES,
+      config: routerChildConfigFn
+    }),
   ],
 })
 export class ChildDetailModule {
-  public static routes = routes;
+  public static routes = CHILD_DETAIL_STATES;
 }

starter/src/app/+detail/+child-detail/child-detail.routes.ts

@@ -1,5 +1,6 @@
 import { ChildDetailComponent } from './child-detail.component';
+import { Ng2StateDeclaration } from '@uirouter/angular';
 
-export const routes = [
-  { path: '', component: ChildDetailComponent,  pathMatch: 'full' },
+export const CHILD_DETAIL_STATES: Ng2StateDeclaration[] = [
+  { name: 'childDetail', url: '/child-detail', parent: 'detail', component: ChildDetailComponent },
 ];

starter/src/app/+detail/detail.component.ts

@@ -15,11 +15,11 @@ console.log('`Detail` component loaded asynchronously');
   template: `
     <h1>Hello from Detail</h1>
     <span>
-      <a [routerLink]=" ['./child-detail'] ">
+      <a uiSref="childDetail">
         Child Detail
       </a>
     </span>
-    <router-outlet></router-outlet>
+    <ui-view></ui-view>
   `,
 })
 export class DetailComponent implements OnInit {

starter/src/app/+detail/detail.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { UIRouterModule } from '@uirouter/angular';
 
-import { routes } from './detail.routes';
+import { DETAIL_STATES } from './detail.routes';
 import { DetailComponent } from './detail.component';
+import { routerChildConfigFn } from '../router.config';
 
 console.log('`Detail` bundle loaded asynchronously');
 
@@ -18,9 +19,12 @@ console.log('`Detail` bundle loaded asynchronously');
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule.forChild(routes),
+    UIRouterModule.forChild({
+      states: DETAIL_STATES,
+      config: routerChildConfigFn
+    }),
   ],
 })
 export class DetailModule {
-  public static routes = routes;
+  public static routes = DETAIL_STATES;
 }

starter/src/app/+detail/detail.routes.ts

@@ -1,8 +1,11 @@
 import { DetailComponent } from './detail.component';
+import { Ng2StateDeclaration } from '@uirouter/angular';
 
-export const routes = [
-  { path: '', children: [
-    { path: '', component: DetailComponent },
-    { path: 'child-detail', loadChildren: './+child-detail#ChildDetailModule' }
-  ]},
+export const DETAIL_STATES: Ng2StateDeclaration[] = [
+    {name: 'detail', url: '/detail', component: DetailComponent},
+    {
+        name: 'childDetail.**',
+        url: '/child-detail',
+        loadChildren: './+child-detail/child-detail.module#ChildDetailModule'
+    }
 ];

starter/src/app/+dev-module/dev-module.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { UIRouterModule } from '@uirouter/angular';
 
-import { routes } from './dev-module.routes';
+import { DEV_MODULE_STATES } from './dev-module.routes';
 import { DevModuleComponent } from './dev-module.component';
+import { routerChildConfigFn } from '../router.config';
 
 /*
       Don't leave side-effects outside of classes so this will tree-shake nicely on prod
@@ -13,11 +14,14 @@ import { DevModuleComponent } from './dev-module.component';
   declarations: [ DevModuleComponent ],
   imports: [
     CommonModule,
-    RouterModule.forChild(routes),
+    UIRouterModule.forChild({
+      states: DEV_MODULE_STATES,
+      config: routerChildConfigFn
+    }),
   ],
 })
 export class DevModuleModule {
-  public static routes = routes;
+  public static routes = DEV_MODULE_STATES;
   constructor() {
     console.log('`DevModuleModule` module initialized');
   }

starter/src/app/+dev-module/dev-module.routes.ts

@@ -1,5 +1,6 @@
 import { DevModuleComponent } from './dev-module.component';
+import { Ng2StateDeclaration } from '@uirouter/angular';
 
-export const routes = [
-  { path: 'dev-module', component: DevModuleComponent }
+export const DEV_MODULE_STATES: Ng2StateDeclaration[] = [
+  { name: 'devModuleDefault', url: '/dev-module', component: DevModuleComponent }
 ];

starter/src/app/about/about.component.ts

@@ -1,8 +1,10 @@
 import {
   Component,
+  Input,
   OnInit
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+// import { Transition } from '@uirouter/angular';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'about',
@@ -24,20 +26,42 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class AboutComponent implements OnInit {
 
+  @Input() public resolvedData: Observable<any>;
+  @Input() public paramData: any;
+
   public localState: any;
   constructor(
-    public route: ActivatedRoute
-  ) {}
+    // public transition: Transition   // the last transition could be injected if needed
+  ) { /* empty */ }
 
   public ngOnInit() {
-    this.route
-      .data
-      .subscribe((data: any) => {
-        /**
-         * Your resolved data from route.
-         */
-        this.localState = data.yourData;
-      });
+    /**
+     * Getting the params values
+     */
+    this.localState = {...this.localState, paramData: this.paramData};
+    // OR get params values from the transition itself
+    // this.localState = {...this.localState, paramData: this.transition.params().paramData};
+
+    /**
+     * Getting the resolves values
+     */
+    // if the resolve is an observable, we need to subscribe to it to get the value
+    this.resolvedData.subscribe((data: any) => {
+        console.warn('data resolved');
+        this.localState = {...this.localState, ...data};
+    });
+
+    // if the resolve is a promise and the resolve policy is WAIT
+    // the value is already available
+    // this.localState = {...this.localState, ...this.resolvedData};
+
+    // OR get resolved values from the transition itself
+    // this.localState = {...this.localState, ...this.transition.injector().get('resolvedData')};
+
+    // if the resolve is a promise and the resolve policy is NOWAIT
+    // the promise MUST be accessed via the transition itself
+    // let resolvePromise: Promise<any> = this.transition.injector().get('resolvedData');
+    // resolvePromise.then((data: any) => this.localState = {...this.localState, ...data});
 
     console.log('hello `About` component');
     /**
@@ -59,7 +83,7 @@ export class AboutComponent implements OnInit {
       System.import('../../assets/mock-data/mock-data.json')
         .then((json) => {
           console.log('async mockData', json);
-          this.localState = json;
+          this.localState = {...this.localState, asyncData: json};
         });
 
     });