Update to Angular 4 (but leave directory name as Angular2Spa until finished)

templates/Angular2Spa/ClientApp/boot-server.ts

@@ -1,34 +1,36 @@
-import 'angular2-universal-polyfills';
-import 'angular2-universal-patch';
+import 'reflect-metadata';
 import 'zone.js';
+import 'rxjs/add/operator/first';
+import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
+import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
-import { enableProdMode } from '@angular/core';
-import { platformNodeDynamic } from 'angular2-universal';
-import { AppModule } from './app/app.module';
+import { AppModule } from './app/app.module.server';
 
 enableProdMode();
-const platform = platformNodeDynamic();
 
 export default createServerRenderer(params => {
-    return new Promise<RenderResult>((resolve, reject) => {
-        const requestZone = Zone.current.fork({
-            name: 'angular-universal request',
-            properties: {
-                baseUrl: '/',
-                requestUrl: params.url,
-                originUrl: params.origin,
-                preboot: false,
-                document: '<app></app>'
-            },
-            onHandleError: (parentZone, currentZone, targetZone, error) => {
-                // If any error occurs while rendering the module, reject the whole operation
-                reject(error);
-                return true;
-            }
-        });
+    const providers = [
+        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
+        { provide: 'ORIGIN_URL', useValue: params.origin }
+    ];
 
-        return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => {
-            resolve({ html: html });
-        }, reject);
+    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
+        const appRef = moduleRef.injector.get(ApplicationRef);
+        const state = moduleRef.injector.get(PlatformState);
+        const zone = moduleRef.injector.get(NgZone);
+
+        return new Promise<RenderResult>((resolve, reject) => {
+            zone.onError.subscribe(errorInfo => reject(errorInfo));
+            appRef.isStable.first(isStable => isStable).subscribe(() => {
+                // Because 'onStable' fires before 'onError', we have to delay slightly before
+                // completing the request in case there's an error to report
+                setImmediate(() => {
+                    resolve({
+                        html: state.renderToString()
+                    });
+                    moduleRef.destroy();
+                });
+            });
+        });
     });
 });