Update Angular2Spa template to Angular 2.0/TypeScript 2.0, based on @MarkPieszak's PR

templates/Angular2Spa/ClientApp/app/app.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { UniversalModule } from 'angular2-universal';
+import { AppComponent } from './components/app/app.component'
+import { NavMenuComponent } from './components/navmenu/navmenu.component';
+import { HomeComponent } from './components/home/home.component';
+import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
+import { CounterComponent } from './components/counter/counter.component';
+
+@NgModule({
+    bootstrap: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        NavMenuComponent,
+        CounterComponent,
+        FetchDataComponent,
+        HomeComponent
+    ],
+    imports: [
+        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
+        RouterModule.forRoot([
+            { path: '', redirectTo: 'home', pathMatch: 'full' },
+            { path: 'home', component: HomeComponent },
+            { path: 'counter', component: CounterComponent },
+            { path: 'fetch-data', component: FetchDataComponent },
+            { path: '**', redirectTo: 'home' }
+        ])
+    ]
+})
+export class AppModule {
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app',
+    template: require('./app.component.html')
+})
+export class AppComponent {
+}

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'counter',
+    template: require('./counter.component.html')
+})
+export class CounterComponent {
+    public currentCount = 0;
+
+    public incrementCounter() {
+        this.currentCount++;
+    }
+}

templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.ts → templates/Angular2Spa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -1,11 +1,11 @@
-import * as ng from '@angular/core';
+import { Component } from '@angular/core';
 import { Http } from '@angular/http';
 
-@ng.Component({
-  selector: 'fetch-data',
-  template: require('./fetch-data.html')
+@Component({
+    selector: 'fetchdata',
+    template: require('./fetchdata.component.html')
 })
-export class FetchData {
+export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
     constructor(http: Http) {

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'home',
+    template: require('./home.component.html')
+})
+export class HomeComponent {
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'nav-menu',
+    template: require('./navmenu.component.html')
+})
+export class NavMenuComponent {
+}

templates/Angular2Spa/ClientApp/boot-client.ts

@@ -1,25 +1,23 @@
-import 'es6-shim';
-require('zone.js');
+import 'angular2-universal-polyfills/browser';
+import { enableProdMode } from '@angular/core';
+import { platformUniversalDynamic } from 'angular2-universal';
+import { AppModule } from './app/app.module';
+
+// Include styles in the bundle
 import 'bootstrap';
-import 'reflect-metadata';
 import './styles/site.css';
 
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { FormBuilder } from '@angular/common';
-import { provideRouter } from '@angular/router';
-import { HTTP_PROVIDERS } from '@angular/http';
-import { App } from './components/app/app';
-import { routes } from './routes';
-
-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.
-declare var module: any;
-if (module.hot) {
-    module.hot.accept();
+// Enable either Hot Module Reloading or production mode
+const hotModuleReplacement = module['hot'];
+if (hotModuleReplacement) {
+    hotModuleReplacement.accept();
+    hotModuleReplacement.dispose(() => { platform.destroy(); });
+} else {
+    enableProdMode();
 }
+
+// Boot the application
+const platform = platformUniversalDynamic();
+document.addEventListener('DOMContentLoaded', () => {
+    platform.bootstrapModule(AppModule);
+});

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -1,36 +1,28 @@
-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';
+import 'angular2-universal-polyfills';
+import 'zone.js';
+import { enableProdMode } from '@angular/core';
+import { platformNodeDynamic } from 'angular2-universal';
+import { AppModule } from './app/app.module';
 
-const bootloader = ngUniversal.bootloader({
-    async: true,
-    preboot: false,
-    platformProviders: [
-        ngCore.provide(APP_BASE_HREF, { useValue: '/' }),
-    ]
-});
+enableProdMode();
+const platform = platformNodeDynamic();
 
-export default function (params: any): Promise<{ html: string, globals?: any }> {
-    const config: ngUniversal.AppConfig = {
-        directives: [App],
-        providers: [
-            ngCore.provide(ORIGIN_URL, { useValue: params.origin }),
-            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
-        template: '<!DOCTYPE html>\n<html><head></head><body><app></app></body></html>'
-    };
-
-    return bootloader.serializeApplication(config).then(html => {
-        return { html };
+export default function (params: any) : Promise<{ html: string, globals?: any }> {
+    const requestZone = Zone.current.fork({
+        name: 'angular-universal request',
+        properties: {
+            baseUrl: '/',
+            requestUrl: params.url,
+            originUrl: params.origin,
+            preboot: false,
+            // TODO: Render just the <app> component instead of wrapping it inside an extra HTML document
+            // Waiting on https://github.com/angular/universal/issues/347
+            document: '<!DOCTYPE html><html><head></head><body><app></app></body></html>'
+        }
     });
+
+    return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule))
+        .then(html => {
+            return { html: html };
+        });
 }

templates/Angular2Spa/tsconfig.json → templates/Angular2Spa/ClientApp/tsconfig.json

@@ -5,10 +5,10 @@
     "sourceMap": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "skipDefaultLibCheck": true
+    "skipDefaultLibCheck": true,
+    "lib": [ "es6", "dom" ],
+    "types": [ "node" ]
   },
-  "exclude": [
-      "bin",
-      "node_modules"
-  ]
+  "exclude": [ "bin", "node_modules" ],
+  "atom": { "rewriteTsconfig": false }
 }

templates/Angular2Spa/package.json

@@ -1,38 +1,41 @@
 {
-  "name": "WebApplicationBasic",
+  "name": "Angular2Spa",
   "version": "0.0.0",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/platform-server": "2.0.0-rc.4",
-    "@angular/router": "3.0.0-beta.2",
-    "angular2-universal": "^0.104.5",
-    "aspnet-prerendering": "^1.0.2",
-    "aspnet-webpack": "^1.0.6",
-    "bootstrap": "^3.3.6",
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/http": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/platform-server": "2.0.0",
+    "@angular/router": "3.0.0",
+    "@types/node": "^6.0.38",
+    "angular2-platform-node": "~2.0.10",
+    "angular2-universal": "~2.0.10",
+    "angular2-universal-polyfills": "~2.0.10",
+    "aspnet-prerendering": "^1.0.6",
+    "aspnet-webpack": "^1.0.11",
+    "bootstrap": "^3.3.7",
     "css": "^2.2.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.25.0",
     "es6-shim": "^0.35.1",
     "expose-loader": "^0.7.1",
-    "extendify": "^1.0.0",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
+    "file-loader": "^0.9.0",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^2.2.1",
-    "preboot": "^2.0.10",
+    "preboot": "^4.5.2",
     "raw-loader": "^0.5.1",
-    "rxjs": "5.0.0-beta.6",
+    "rxjs": "5.0.0-beta.12",
     "style-loader": "^0.13.0",
-    "ts-loader": "^0.8.1",
-    "typescript": "^1.8.2",
+    "ts-loader": "^0.8.2",
+    "typescript": "^2.0.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.14",
     "webpack-externals-plugin": "^1.0.0",
     "webpack-hot-middleware": "^2.10.0",
-    "zone.js": "^0.6.12"
+    "zone.js": "^0.6.21"
   }
 }