Demo shell improvements (#1199)

* #1197 auth guards

* #1197 restore lost router dependency to all libs

* #1197 ecm/bpm auth guards, home page

- ECM auth guard (redirect to Login if ECM auth is missing)
- BPM auth guard (redirect to Login if BPM auth is missing)
- new Home page and route, show details on demo areas

* css improvements

make app text white as per request

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

@@ -17,13 +17,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=""
+                <a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/">Home</a>
-                   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="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="tag" href="" routerLink="/tag">Tag</a>
+                <!--<a class="mdl-navigation__link" data-automation-id="tag" href="" routerLink="/tag">Tag</a>-->
                 <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
                 <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
             </nav>
@@ -60,6 +60,7 @@
         </nav>
         <span class="mdl-layout-title">Components</span>
         <nav class="mdl-navigation">
+            <a class="mdl-navigation__link" href="" routerLink="/" (click)="hideDrawer()">Home</a>
             <a class="mdl-navigation__link" href="" routerLink="/files" (click)="hideDrawer()">DocumentList</a>
             <a class="mdl-navigation__link" href="" routerLink="/datatable" (click)="hideDrawer()">DataTable</a>
             <a class="mdl-navigation__link" href="" routerLink="/uploader" (click)="hideDrawer()">Uploader</a>

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

@@ -65,7 +65,7 @@ export class AppComponent {
     }
 
     isLoginPage(): boolean {
-        return location.pathname === '/login' || location.pathname === '/' || location.pathname === '/settings';
+        return location.pathname === '/login' || location.pathname === '/settings';
     }
 
     onLogout(event) {

demo-shell-ng2/app/app.declarations.d.ts

@@ -0,0 +1,19 @@
+/*!
+ * @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.
+ */
+
+declare var module: any;
+declare let __moduleName: string;

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

@@ -38,6 +38,7 @@ import { routing } from './app.routes';
 import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
 
 import {
+    HomeComponent,
     DataTableDemoComponent,
     SearchComponent,
     SearchBarComponent,
@@ -75,6 +76,7 @@ import {
     ],
     declarations: [
         AppComponent,
+        HomeComponent,
         SearchBarComponent,
         DataTableDemoComponent,
         SearchComponent,

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

@@ -17,8 +17,10 @@
 
 import { ModuleWithProviders }  from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard, AuthGuardEcm, AuthGuardBpm } from 'ng2-alfresco-core';
 
 import {
+    HomeComponent,
     FilesComponent,
     DataTableDemoComponent,
     SearchComponent,
@@ -36,23 +38,80 @@ import {
 import { UploadButtonComponent } from 'ng2-alfresco-upload';
 
 export const appRoutes: Routes = [
-    { 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: '',
-    { path: 'activiti', component: ActivitiAppsView },
+        component: HomeComponent,
-    { path: 'activiti/apps', component: ActivitiAppsView },
+        canActivate: [AuthGuard]
-    { path: 'activiti/apps/:appId/tasks', component: ActivitiDemoComponent },
+    },
-
+    {
-    { path: 'activiti/appId/:appId', component: ActivitiDemoComponent },
+        path: 'home',
-    { path: 'activiti/tasks/:id', component: FormViewer },
+        component: HomeComponent,
-    { path: 'activiti/tasksnode/:id', component: FormNodeViewer },
+        canActivate: [AuthGuard]
-    { path: 'webscript', component: WebscriptComponent },
+    },
-    { path: 'tag', component: TagComponent },
+    {
+        path: 'files',
+        component: FilesComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'datatable',
+        component: DataTableDemoComponent,
+        canActivate: [AuthGuard]
+    },
+    {
+        path: 'uploader',
+        component: UploadButtonComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'search',
+        component: SearchComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'activiti',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps',
+        component: ActivitiAppsView,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'activiti/apps/:appId/tasks',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if neeeded
+    {
+        path: 'activiti/appId/:appId',
+        component: ActivitiDemoComponent,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasks/:id',
+        component: FormViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    // TODO: check if needed
+    {
+        path: 'activiti/tasksnode/:id',
+        component: FormNodeViewer,
+        canActivate: [AuthGuardBpm]
+    },
+    {
+        path: 'webscript',
+        component: WebscriptComponent,
+        canActivate: [AuthGuardEcm]
+    },
+    {
+        path: 'tag',
+        component: TagComponent,
+        canActivate: [AuthGuardEcm]
+    },
     { path: 'about', component: AboutComponent },
     { path: 'settings', component: SettingComponent }
 ];

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

@@ -0,0 +1,112 @@
+<div class="p-10">
+    <h1>Demo App</h1>
+    <p>Demo Application for Alfresco Angular 2 Components</p>
+
+    <h2>Featured demos</h2>
+    Some of the areas will require diffent authentication providers.
+    See details for each component.
+    You may be automatically redirected to Login screen.
+
+
+    <h3><a href="" routerLink="/files">DocumentList</a></h3>
+    <div>
+        Demonstrates multiple Alfresco ECM components used together:
+        <ul>
+            <li>
+                Document List (
+                    <a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
+                )
+            </li>
+            <li>
+                Upload (
+                    <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
+                )
+            </li>
+            <li>
+                Context Menu (
+                    <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
+                )
+            </li>
+            <li>
+                DataTable (
+                    <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+                )
+            </li>
+        </ul>
+    </div>
+    <p>
+        Authentication provider: ECM
+    </p>
+
+    <h3><a href="" routerLink="/activiti">Activiti</a></h3>
+    <div>
+        Demonstrates multiple Alfresco BPM components used together:
+        <ul>
+            <li>
+                App List (
+                    <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
+                )
+            </li>
+            <li>
+                Task List (
+                    <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
+                )
+            </li>
+            <li>
+                Process List (
+                    <a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
+                )
+            </li>
+            <li>
+                Form (
+                    <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
+                )
+            </li>
+            <li>
+                Analytics (
+                    <a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
+                    <a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
+                )
+            </li>
+            <li>
+                DataTable (
+                    <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
+                )
+            </li>
+        </ul>
+    </div>
+    <p>
+        Authentication provider: BPM
+    </p>
+
+    <h3><a href="" routerLink="/datatable">DataTable</a></h3>
+    <p>TODO: summary</p>
+    <p>
+        Authentication provider: any
+    </p>
+
+    <h3><a href="" routerLink="/uploader">Uploader</a></h3>
+    <p>TODO: summary</p>
+    <p>
+        Authentication provider: ECM
+    </p>
+
+    <h3><a href="" routerLink="/login">Login</a></h3>
+    <p>TODO: summary</p>
+    <p>
+        Authentication provider: none
+    </p>
+
+    <h3><a href="" routerLink="/webscript">Webscript</a></h3>
+    <p>TODO: summary</p>
+    <p>
+        Authentication provider: ECM
+    </p>
+
+    <h3><a href="" routerLink="/tag">Tag</a></h3>
+    <p>TODO: summary</p>
+    <p>
+        Authentication provider: ECM
+    </p>
+
+</div>

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

@@ -0,0 +1,25 @@
+/*!
+ * @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 { Component } from '@angular/core';
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'home-view',
+    templateUrl: './home.component.html'
+})
+export class HomeComponent {}

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

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+export { HomeComponent } from './home/home.component';
 export { DataTableDemoComponent } from './datatable/datatable-demo.component';
 export { SearchComponent } from './search/search.component';
 export { SearchBarComponent } from './search/search-bar.component';

ng2-components/ng2-activiti-analytics/package.json

@@ -41,6 +41,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-activiti-diagrams/package.json

@@ -37,6 +37,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-activiti-form/package.json

@@ -45,6 +45,7 @@
     "activiti"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-activiti-processlist/package.json

@@ -44,6 +44,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-activiti-tasklist/package.json

@@ -48,6 +48,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.css

@@ -1,6 +1,11 @@
 :host {
     width: 100%;
 }
+
+.application-title {
+    color: white;
+}
+
 .logo {
     position: absolute;
     right: 20px;
@@ -131,4 +136,4 @@
 }
 .selectedIcon{
     color: #e9f1f3!important;
-}
+}

ng2-components/ng2-activiti-tasklist/src/components/activiti-apps.component.html

@@ -11,7 +11,7 @@
         <div (click)="selectApp(app)" [ngClass]="['mdl-card mdl-cell',  getTheme(app)]" *ngFor="let app of appList">
             <div class="logo"><i class="material-icons">{{getBackgroundIcon(app)}}</i></div>
             <div class="mdl-card__title">
-                <h1 class="mdl-card__title-text">{{app.name}}</h1>
+                <h1 class="mdl-card__title-text application-title">{{app.name}}</h1>
             </div>
             <div class="mdl-card__supporting-text">
                 <p>{{app.description}}</p>

ng2-components/ng2-alfresco-core/index.ts

@@ -29,7 +29,10 @@ import {
     AlfrescoTranslationService,
     AlfrescoAuthenticationService,
     AlfrescoContentService,
-    RenditionsService
+    RenditionsService,
+    AuthGuard,
+    AuthGuardEcm,
+    AuthGuardBpm
 } from './src/services/index';
 
 import { MATERIAL_DESIGN_DIRECTIVES } from './src/components/material/index';
@@ -48,6 +51,9 @@ export const ALFRESCO_CORE_PROVIDERS: any[] = [
     AlfrescoTranslationLoader,
     AlfrescoTranslationService,
     RenditionsService,
+    AuthGuard,
+    AuthGuardEcm,
+    AuthGuardBpm,
     ...CONTEXT_MENU_PROVIDERS
 ];
 

ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import {
+  CanActivate, Router, CanActivateChild,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+
+import { AlfrescoAuthenticationService } from './AlfrescoAuthentication.service';
+
+@Injectable()
+export class AuthGuardBpm implements CanActivate, CanActivateChild {
+    constructor(private authService: AlfrescoAuthenticationService, private router: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        let url: string = state.url;
+
+        return this.checkLogin(url);
+    }
+
+    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        return this.canActivate(route, state);
+    }
+
+    checkLogin(url: string): boolean {
+        if (this.authService.isBpmLoggedIn()) {
+            return true;
+        }
+
+        // Store the attempted URL for redirecting
+        // this.authService.redirectUrl = url;
+
+        // Navigate to the login page with extras
+        this.router.navigate(['/login']);
+        return false;
+    }
+}

ng2-components/ng2-alfresco-core/src/services/auth-guard-ecm.service.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import {
+  CanActivate, Router, CanActivateChild,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+
+import { AlfrescoAuthenticationService } from './AlfrescoAuthentication.service';
+
+@Injectable()
+export class AuthGuardEcm implements CanActivate, CanActivateChild {
+    constructor(private authService: AlfrescoAuthenticationService, private router: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        let url: string = state.url;
+
+        return this.checkLogin(url);
+    }
+
+    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        return this.canActivate(route, state);
+    }
+
+    checkLogin(url: string): boolean {
+        if (this.authService.isEcmLoggedIn()) {
+            return true;
+        }
+
+        // Store the attempted URL for redirecting
+        // this.authService.redirectUrl = url;
+
+        // Navigate to the login page with extras
+        this.router.navigate(['/login']);
+        return false;
+    }
+}

ng2-components/ng2-alfresco-core/src/services/auth-guard.service.ts

@@ -0,0 +1,53 @@
+/*!
+ * @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 { Injectable } from '@angular/core';
+import {
+  CanActivate, Router, CanActivateChild,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+
+import { AlfrescoAuthenticationService } from './AlfrescoAuthentication.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+    constructor(private authService: AlfrescoAuthenticationService, private router: Router) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        let url: string = state.url;
+
+        return this.checkLogin(url);
+    }
+
+    canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        return this.canActivate(route, state);
+    }
+
+    checkLogin(url: string): boolean {
+        if (this.authService.isLoggedIn()) {
+            return true;
+        }
+
+        // Store the attempted URL for redirecting
+        // this.authService.redirectUrl = url;
+
+        // Navigate to the login page with extras
+        this.router.navigate(['/login']);
+        return false;
+    }
+}

ng2-components/ng2-alfresco-core/src/services/index.ts

@@ -23,3 +23,6 @@ export * from './AlfrescoTranslation.service';
 export * from './AlfrescoAuthentication.service';
 export * from './AlfrescoContent.service';
 export * from './renditions.service';
+export * from './auth-guard.service';
+export * from './auth-guard-ecm.service';
+export * from './auth-guard-bpm.service';

ng2-components/ng2-alfresco-datatable/package.json

@@ -44,6 +44,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-documentlist/package.json

@@ -52,6 +52,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-login/package.json

@@ -56,6 +56,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-search/package.json

@@ -52,7 +52,7 @@
     "alfresco"
   ],
   "dependencies": {
-    "@types/node": "^6.0.42",
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",
@@ -60,7 +60,6 @@
     "@angular/http": "2.0.0",
     "@angular/platform-browser": "2.0.0",
     "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",

ng2-components/ng2-alfresco-tag/package.json

@@ -31,6 +31,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-upload/package.json

@@ -53,6 +53,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-userinfo/package.json

@@ -31,6 +31,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-viewer/package.json

@@ -46,6 +46,7 @@
     "alfresco"
   ],
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",

ng2-components/ng2-alfresco-webscript/package.json

@@ -31,6 +31,7 @@
     "url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
   },
   "dependencies": {
+    "@angular/router": "3.0.0",
     "@angular/common": "2.0.0",
     "@angular/compiler": "2.0.0",
     "@angular/core": "2.0.0",