Add server-side prerendering for Angular 2 template

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -0,0 +1,32 @@
+import 'angular2-universal-preview/dist/server/universal-polyfill.js';
+import * as ngCore from 'angular2/core';
+import * as ngRouter from 'angular2/router';
+import * as ngUniversal from 'angular2-universal-preview';
+import { BASE_URL } from 'angular2-universal-preview/dist/server/src/http/node_http';
+import * as ngUniversalRender from 'angular2-universal-preview/dist/server/src/render';
+
+// TODO: Make this ugly code go away, e.g., by somehow loading via Webpack
+function loadAsString(module, filename) {
+    module.exports = require('fs').readFileSync(filename, 'utf8');
+}
+(require as any).extensions['.html'] = loadAsString;
+(require as any).extensions['.css'] = loadAsString;
+let App: any = require('./components/app/app').App;
+
+export default function (params: any): Promise<{ html: string }> {
+    return new Promise<{ html: string, globals: { [key: string]: any } }>((resolve, reject) => {
+        const serverBindings = [
+            ngRouter.ROUTER_BINDINGS,
+            ngUniversal.HTTP_PROVIDERS,
+            ngCore.provide(BASE_URL, { useValue: params.absoluteUrl }),
+            ngCore.provide(ngUniversal.REQUEST_URL, { useValue: params.url }),
+            ngCore.provide(ngRouter.APP_BASE_HREF, { useValue: '/' }),
+            ngUniversal.SERVER_LOCATION_PROVIDERS
+        ];
+
+        ngUniversalRender.renderToString(App, serverBindings).then(
+            html => resolve({ html, globals: {} }), 
+            reject // Also propagate any errors back into the host application
+        );
+    });
+}

templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.ts

@@ -1,5 +1,5 @@
 import * as ng from 'angular2/core';
-import fetch from 'isomorphic-fetch';
+import { Http } from 'angular2/http';
 
 @ng.Component({
   selector: 'fetch-data'
@@ -10,12 +10,10 @@ import fetch from 'isomorphic-fetch';
 export class FetchData {
     public forecasts: WeatherForecast[];
     
-    constructor() {
-        fetch('/api/SampleData/WeatherForecasts')
-            .then(response => response.json())
-            .then((data: WeatherForecast[]) => {
-                this.forecasts = data;
-            });
+    constructor(http: Http) {
+        http.get('/api/SampleData/WeatherForecasts').subscribe(result => {
+            this.forecasts = result.json(); 
+        });
     }
 }
 

templates/Angular2Spa/ClientApp/components/home/home.html

@@ -9,6 +9,7 @@
 <p>To help you get started, we've also set up:</p>
 <ul>
     <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+    <li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
     <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
     <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</li>
     <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>