#489 Upgrade to angular/router

demo-shell-ng2/app/app.component.html

@@ -12,14 +12,13 @@
 
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">
-                <a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">DocumentList</a>
+                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
-                <a class="mdl-navigation__link" data-automation-id="datatable" href="" [routerLink]="['DataTable']">DataTable</a>
+                <a class="mdl-navigation__link" data-automation-id="datatable" href="" routerLink="/datatable">DataTable</a>
-                <a class="mdl-navigation__link" data-automation-id="uploader" href="" [routerLink]="['Uploader']">Uploader</a>
+                <a class="mdl-navigation__link" data-automation-id="uploader" href="" routerLink="/uploader">Uploader</a>
-                <a class="mdl-navigation__link" data-automation-id="activiti" href="" [routerLink]="['Activiti']">Activiti</a>
+                <a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Activiti</a>
-                <a class="mdl-navigation__link" data-automation-id="tasks" href="" [routerLink]="['Tasks']">Tasks</a>
+                <a class="mdl-navigation__link" data-automation-id="webscript" href="" routerLink="/webscript">Webscript</a>
-                <a class="mdl-navigation__link" data-automation-id="webscript" href="" [routerLink]="['Webscript']">Webscript</a>
+                <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
-                <a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
+                <a class="mdl-navigation__link" data-automation-id="about" href="" routerLink="/about">About</a>
-                <a class="mdl-navigation__link" data-automation-id="about" href="" [routerLink]="['About']">About</a>
             </nav>
 
             <!-- Right aligned menu below button -->
@@ -34,7 +33,7 @@
                 <li class="mdl-menu__item" (click)="changeLanguage('gr')"><span class="flag-icon flag-icon-gr"></span> Greek</li>
                 <li class="mdl-menu__item" (click)="changeLanguage('it')"><span class="flag-icon flag-icon-it"></span> Italian</li>
                 <li *ngIf="!isLoggedIn()" class="mdl-menu__item">More</li>
-                <li *ngIf="!isLoggedIn()" class="mdl-menu__item" [routerLink]="['Login']">Login</li>
+                <a *ngIf="!isLoggedIn()" class="mdl-menu__item" routerLink="/login">Login</a>
                 <li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">Logout</li>
             </ul>
         </div>
@@ -42,14 +41,13 @@
     <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">Components List</span>
         <nav class="mdl-navigation">
-            <a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">DocumentList Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList Demo</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['DataTable']" (click)="hideDrawer()">DataTable Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable Demo</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['Uploader']" (click)="hideDrawer()">Uploader Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader Demo</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/login" (click)="hideDrawer()">Login Demo</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['Activiti']" (click)="hideDrawer()">Activiti Components Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/activiti" (click)="hideDrawer()">Activiti Components Demo</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['Tasks']" (click)="hideDrawer()">Activiti Tasks Demo</a>
+            <a class="mdl-navigation__link" href="" routerLink="/webscript" (click)="hideDrawer()">Webscript</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['Webscript']" (click)="hideDrawer()">Webscript</a>
+            <a class="mdl-navigation__link" href="" routerLink="/about" (click)="hideDrawer()">About</a>
-            <a class="mdl-navigation__link" href="" [routerLink]="['About']" (click)="hideDrawer()">About</a>
         </nav>
         <span class="mdl-layout-title">ECM host</span>
         <nav class="mdl-navigation">
@@ -66,7 +64,6 @@
         <div class="page-content">
             <alfresco-login method="{{methodName}}"></alfresco-login>
             <router-outlet></router-outlet>
-            <!--<auth-router-outlet></auth-router-outlet>-->
         </div>
     </main>
 </div>

demo-shell-ng2/app/app.component.ts

@@ -16,8 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { Router, RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES, Router } from '@angular/router';
-import { FilesComponent } from './components/files/files.component';
 
 import {
     MDL,
@@ -26,15 +25,8 @@ import {
     AlfrescoPipeTranslate,
     AlfrescoAuthenticationService
 } from 'ng2-alfresco-core';
-import { UploadButtonComponent } from 'ng2-alfresco-upload';
+
-import { DataTableDemoComponent } from './components/datatable/datatable-demo.component';
+import { SearchBarComponent } from './components/index';
-import { SearchComponent } from './components/search/search.component';
-import { SearchBarComponent } from './components/search/search-bar.component';
-import { LoginDemoComponent } from './components/login/login-demo.component';
-import { TasksDemoComponent } from './components/tasks/tasks-demo.component';
-import { ActivitiDemoComponent } from './components/activiti/activiti-demo.component';
-import { WebscriptComponent } from './components/webscript/webscript.component';
-import { AboutComponent } from './components/about/about.component';
 
 declare var document: any;
 
@@ -45,19 +37,6 @@ declare var document: any;
     directives: [SearchBarComponent, ROUTER_DIRECTIVES, MDL],
     pipes: [AlfrescoPipeTranslate]
 })
-@RouteConfig([
-    {path: '/home', name: 'Home', component: FilesComponent},
-    {path: '/files', name: 'Files', component: FilesComponent},
-    {path: '/datatable', name: 'DataTable', component: DataTableDemoComponent},
-    {path: '/', name: 'Login', component: LoginDemoComponent, useAsDefault: true},
-    {path: '/uploader', name: 'Uploader', component: UploadButtonComponent},
-    {path: '/login', name: 'Login', component: LoginDemoComponent},
-    {path: '/search', name: 'Search', component: SearchComponent},
-    {path: '/tasks', name: 'Tasks', component: TasksDemoComponent},
-    {path: '/activiti', name: 'Activiti', component: ActivitiDemoComponent},
-    {path: '/webscript', name: 'Webscript', component: WebscriptComponent},
-    {path: '/about', name: 'About', component: AboutComponent}
-])
 export class AppComponent {
     translate: AlfrescoTranslationService;
     searchTerm: string = '';
@@ -90,10 +69,6 @@ export class AppComponent {
         localStorage.setItem(`bpmHost`, this.bpmHost);
     }
 
-    isActive(instruction: any[]): boolean {
-        return this.router.isRouteActive(this.router.generate(instruction));
-    }
-
     isLoggedIn(): boolean {
         return this.auth.isLoggedIn();
     }
@@ -102,7 +77,7 @@ export class AppComponent {
         event.preventDefault();
         this.auth.logout()
             .subscribe(
-                () => this.router.navigate(['Login'])
+                () => this.router.navigate(['/login'])
             );
     }
 

demo-shell-ng2/app/app.routes.ts

@@ -0,0 +1,46 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { provideRouter, RouterConfig } from '@angular/router';
+
+import {
+    FilesComponent,
+    UploadButtonComponent,
+    DataTableDemoComponent,
+    SearchComponent,
+    LoginDemoComponent,
+    ActivitiDemoComponent,
+    WebscriptComponent,
+    AboutComponent
+} from './components/index';
+
+export const routes: RouterConfig = [
+    { path: 'home', component: FilesComponent },
+    { path: 'files', component: FilesComponent },
+    { path: 'datatable', component: DataTableDemoComponent },
+    { path: '', component: LoginDemoComponent },
+    { path: 'uploader', component: UploadButtonComponent },
+    { path: 'login', component: LoginDemoComponent },
+    { path: 'search', component: SearchComponent },
+    { path: 'activiti', component: ActivitiDemoComponent },
+    { path: 'webscript', component: WebscriptComponent },
+    { path: 'about', component: AboutComponent }
+];
+
+export const appRouterProviders = [
+    provideRouter(routes)
+];

demo-shell-ng2/app/components/index.ts

@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { UploadButtonComponent } from 'ng2-alfresco-upload';
+export { DataTableDemoComponent } from './datatable/datatable-demo.component';
+export { SearchComponent } from './search/search.component';
+export { SearchBarComponent } from './search/search-bar.component';
+export { LoginDemoComponent } from './login/login-demo.component';
+export { ActivitiDemoComponent } from './activiti/activiti-demo.component';
+export { WebscriptComponent } from './webscript/webscript.component';
+export { AboutComponent } from './about/about.component';
+export { FilesComponent } from './files/files.component';

demo-shell-ng2/app/components/login/login-demo.component.ts

@@ -17,7 +17,7 @@
 
 import { Component } from '@angular/core';
 import { AlfrescoLoginComponent } from 'ng2-alfresco-login';
-import { Router, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES, Router } from '@angular/router';
 
 declare let __moduleName: string;
 
@@ -37,7 +37,7 @@ export class LoginDemoComponent {
 
     onLogin($event) {
         console.log($event);
-        this.router.navigate(['Home']);
+        this.router.navigate(['/home']);
     }
 
     onError($event) {

demo-shell-ng2/app/components/search/search-bar.component.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, EventEmitter, Output } from '@angular/core';
-import { Router } from '@angular/router-deprecated';
+import { Router } from '@angular/router';
 import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
 import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
 import {

demo-shell-ng2/app/main.ts

@@ -16,17 +16,18 @@
  */
 
 import { bootstrap } from '@angular/platform-browser-dynamic';
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 import { HTTP_PROVIDERS } from '@angular/http';
 import { ALFRESCO_SEARCH_PROVIDERS } from 'ng2-alfresco-search';
 import { ALFRESCO_CORE_PROVIDERS } from 'ng2-alfresco-core';
 import { UploadService } from 'ng2-alfresco-upload';
 import { AppComponent } from './app.component';
 
+import { appRouterProviders } from './app.routes';
+
 bootstrap(AppComponent, [
-    ROUTER_PROVIDERS,
+    appRouterProviders,
     HTTP_PROVIDERS,
     ALFRESCO_CORE_PROVIDERS,
     ALFRESCO_SEARCH_PROVIDERS,
     UploadService
-]);
+]).catch(err => console.error(err));

demo-shell-ng2/systemjs.config.js

@@ -62,8 +62,13 @@
     }
     // Most environments should use UMD; some (Karma) need the individual index files
     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+
     // Add package entries for angular packages
     ngPackageNames.forEach(setPackageConfig);
+
+    // No umd for router yet
+    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
+
     var config = {
         map: map,
         packages: packages