Upgrade Angular template to Angular 2 RC3 and migrate to new @angular/router

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -5,11 +5,16 @@ import './styles/site.css';
 
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { FormBuilder } from '@angular/common';
-import * as router from '@angular/router-deprecated';
-import { Http, HTTP_PROVIDERS } from '@angular/http';
+import { provideRouter } from '@angular/router';
+import { HTTP_PROVIDERS } from '@angular/http';
 import { App } from './components/app/app';
+import { routes } from './routes';
 
-bootstrap(App, [router.ROUTER_PROVIDERS, HTTP_PROVIDERS, FormBuilder]);
+bootstrap(App, [
+    ...HTTP_PROVIDERS,
+    FormBuilder,
+    provideRouter(routes)
+]);
 
 // Basic hot reloading support. Automatically reloads and restarts the Angular 2 app each time
 // you modify source files. This will not preserve any application state other than the URL.

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -1,14 +1,17 @@
 import 'angular2-universal/polyfills';
 import * as ngCore from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import { provideRouter } from '@angular/router';
 import * as ngUniversal from 'angular2-universal';
 import { BASE_URL, ORIGIN_URL, REQUEST_URL } from 'angular2-universal/common';
 import { App } from './components/app/app';
+import { routes } from './routes';
 
 const bootloader = ngUniversal.bootloader({
     async: true,
     preboot: false,
     platformProviders: [
-        ngCore.provide(BASE_URL, { useValue: '/' })
+        ngCore.provide(APP_BASE_HREF, { useValue: '/' }),
     ]
 });
 
@@ -16,11 +19,11 @@ export default function (params: any): Promise<{ html: string, globals?: any }>
     const config: ngUniversal.AppConfig = {
         directives: [App],
         providers: [
-            ngCore.provide(REQUEST_URL, { useValue: params.url }),
             ngCore.provide(ORIGIN_URL, { useValue: params.origin }),
-            ...ngUniversal.NODE_PLATFORM_PIPES,
-            ...ngUniversal.NODE_ROUTER_PROVIDERS,
+            ngCore.provide(REQUEST_URL, { useValue: params.url }),
             ...ngUniversal.NODE_HTTP_PROVIDERS,
+            provideRouter(routes),
+            ...ngUniversal.NODE_LOCATION_PROVIDERS,
         ],
         // TODO: Render just the <app> component instead of wrapping it inside an extra HTML document
         // Waiting on https://github.com/angular/universal/issues/347

templates/Angular2Spa/ClientApp/components/app/app.ts

@@ -1,20 +1,11 @@
 import * as ng from '@angular/core';
-import * as router from '@angular/router-deprecated';
-import { Http, HTTP_BINDINGS } from '@angular/http';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 import { NavMenu } from '../nav-menu/nav-menu';
-import { Home } from '../home/home';
-import { FetchData } from '../fetch-data/fetch-data';
-import { Counter } from '../counter/counter';
 
 @ng.Component({
     selector: 'app',
     template: require('./app.html'),
-    directives: [NavMenu, router.ROUTER_DIRECTIVES]
+    directives: [...ROUTER_DIRECTIVES, NavMenu]
 })
-@router.RouteConfig([
-    { path: '/', component: Home, name: 'Home' },
-    { path: '/counter', component: Counter, name: 'Counter' },
-    { path: '/fetch-data', component: FetchData, name: 'FetchData' }
-])
 export class App {
 }

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html

@@ -7,23 +7,23 @@
                 <span class='icon-bar'></span>
                 <span class='icon-bar'></span>
             </button>
-            <a class='navbar-brand' [routerLink]="['/Home']">WebApplicationBasic</a>
+            <a class='navbar-brand' [routerLink]="['/home']">WebApplicationBasic</a>
         </div>
         <div class='clearfix'></div>
         <div class='navbar-collapse collapse'>
             <ul class='nav navbar-nav'>
-                <li>
-                    <a [routerLink]="['/Home']">
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/home']">
                         <span class='glyphicon glyphicon-home'></span> Home
                     </a>
                 </li>
-                <li>
-                    <a [routerLink]="['/Counter']">
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/counter']">
                         <span class='glyphicon glyphicon-education'></span> Counter
                     </a>
                 </li>
-                <li>
-                    <a [routerLink]="['/FetchData']">
+                <li [routerLinkActive]="['link-active']">
+                    <a [routerLink]="['/fetch-data']">
                         <span class='glyphicon glyphicon-th-list'></span> Fetch data
                     </a>
                 </li>

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.ts

@@ -1,10 +1,10 @@
 import * as ng from '@angular/core';
-import * as router from '@angular/router-deprecated';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 
 @ng.Component({
   selector: 'nav-menu',
   template: require('./nav-menu.html'),
-  directives: [router.ROUTER_DIRECTIVES]
+  directives: [...ROUTER_DIRECTIVES]
 })
 export class NavMenu {
 }

templates/Angular2Spa/ClientApp/routes.ts

@@ -0,0 +1,12 @@
+import { RouterConfig } from '@angular/router';
+import { Home } from './components/home/home';
+import { FetchData } from './components/fetch-data/fetch-data';
+import { Counter } from './components/counter/counter';
+
+export const routes: RouterConfig = [
+    { path: '', redirectTo: 'home' },
+    { path: 'home', component: Home },
+    { path: 'counter', component: Counter },
+    { path: 'fetch-data', component: FetchData },
+    { path: '**', redirectTo: 'home' }
+];

templates/Angular2Spa/ClientApp/styles/site.css

@@ -10,9 +10,9 @@
 }
 
 /* Highlighting rules for nav menu items */
-.main-nav li a.router-link-active,
-.main-nav li a.router-link-active:hover,
-.main-nav li a.router-link-active:focus {
+.main-nav li.link-active a,
+.main-nav li.link-active a:hover,
+.main-nav li.link-active a:focus {
     background-color: #4189C7;
     color: white;
 }

templates/Angular2Spa/package.json

@@ -18,16 +18,15 @@
     "webpack-hot-middleware": "^2.10.0"
   },
   "dependencies": {
-    "@angular/common": "2.0.0-rc.1",
-    "@angular/compiler": "2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "@angular/http": "2.0.0-rc.1",
-    "@angular/platform-browser": "2.0.0-rc.1",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
-    "@angular/platform-server": "2.0.0-rc.1",
-    "@angular/router": "2.0.0-rc.1",
-    "@angular/router-deprecated": "2.0.0-rc.1",
-    "angular2-universal": "0.103.0",
+    "@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.8",
+    "angular2-universal": "^0.104.1",
     "aspnet-prerendering": "^1.0.2",
     "aspnet-webpack": "^1.0.1",
     "css": "^2.2.1",

templates/Angular2Spa/webpack.config.vendor.js

@@ -26,9 +26,8 @@ module.exports = {
             '@angular/http',
             '@angular/platform-browser',
             '@angular/platform-browser-dynamic',
-            '@angular/router-deprecated',
+            '@angular/router',
             '@angular/platform-server',
-            '@angular/router-deprecated',
         ]
     },
     output: {