feat(schematics): add prerendering scripts to express-schematic

modules/express-engine/schematics/install/files/root/__prerenderFileName@stripTsExtension__.ts

@@ -0,0 +1,43 @@
+import 'zone.js/dist/zone-node';
+
+import 'reflect-metadata';
+import {readFileSync, writeFileSync, existsSync, mkdirSync} from 'fs';
+import {join} from 'path';
+
+import {enableProdMode} from '@angular/core';
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP, provideModuleMap, renderModuleFactory} = require('./<%= getServerDistDirectory() %>/main');
+
+const BROWSER_FOLDER = join(process.cwd(), '<%= getBrowserDistDirectory() %>');
+
+// Load the index.html file containing references to your application bundle.
+const index = readFileSync(join('browser', 'index.html'), 'utf8');
+
+let previousRender = Promise.resolve();
+
+export const ROUTES = [
+  '/',
+  // Additional pre-rendered Routes go here
+];
+
+// Iterate each route path
+ROUTES.forEach(route => {
+  const fullPath = join(BROWSER_FOLDER, route);
+
+  // Make sure the directory structure is there
+  if (!existsSync(fullPath)) {
+    mkdirSync(fullPath);
+  }
+
+  // Writes rendered HTML to index.html, replacing the file if it already exists.
+  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
+    document: index,
+    url: route,
+    extraProviders: [
+      provideModuleMap(LAZY_MODULE_MAP)
+    ]
+  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
+});

modules/express-engine/schematics/install/files/root/__serverFileName@stripTsExtension__.tsconfig.json

@@ -16,5 +16,7 @@
       "dom"
     ]
   },
-  "include": ["<%= stripTsExtension(serverFileName) %>.ts"]
+  "include": [
+    "<%= stripTsExtension(serverFileName) %>.ts",
+    "<%= stripTsExtension(prerenderFileName) %>.ts"
 }

modules/express-engine/schematics/install/files/root/webpack.server.config.js

@@ -7,7 +7,9 @@ module.exports = {
   mode: 'none',
   entry: {
     // This is our Express server for Dynamic universal
-    server: './<%= stripTsExtension(serverFileName) %>.ts'
+    server: './<%= stripTsExtension(serverFileName) %>.ts',
+    // This is our script for Static Prerendering
+    prerender: './<%= stripTsExtension(prerenderFileName) %>.ts'
   },
   externals: {
     './<%= getServerDistDirectory() %>/main': 'require("./server/main")'

modules/express-engine/schematics/install/index.ts

@@ -99,7 +99,12 @@ function addDependenciesAndScripts(options: UniversalOptions): Rule {
     pkg.scripts['compile:server'] = options.webpack ?
       'webpack --config webpack.server.config.js --progress --colors' :
       `tsc -p ${serverFileName}.tsconfig.json`;
+
     pkg.scripts['serve:ssr'] = `node dist/${serverFileName}`;
+    pkg.scripts['build:prerender'] =
+    // tslint:disable-next-line: max-line-length
+      `npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender`,
+    pkg.scripts['generate:prerender'] = `node dist/${options.prerenderFileName}`,
     pkg.scripts['build:ssr'] = 'npm run build:client-and-server-bundles && npm run compile:server';
     pkg.scripts['build:client-and-server-bundles'] =
       // tslint:disable:max-line-length
@@ -194,12 +199,14 @@ function addExports(options: UniversalOptions): Rule {
     const mainSourceFile = getTsSourceFile(host, mainPath);
     let mainText = getTsSourceText(host, mainPath);
     const mainRecorder = host.beginUpdate(mainPath);
+    const renderModuleFactoryExport = generateExport(mainSourceFile, ['renderModuleFactory'],
+      '@angular/platform-server');
     const expressEngineExport = generateExport(mainSourceFile, ['ngExpressEngine'],
       '@nguniversal/express-engine');
     const moduleMapExport = generateExport(mainSourceFile, ['provideModuleMap'],
       '@nguniversal/module-map-ngfactory-loader');
     const exports = findNodes(mainSourceFile, ts.SyntaxKind.ExportDeclaration);
-    const addedExports = `\n${expressEngineExport}\n${moduleMapExport}\n`;
+    const addedExports = `\n${expressEngineExport}\n${moduleMapExport}\n${renderModuleFactoryExport}\n`;
     const exportChange = insertAfterLastOccurrence(exports, addedExports, mainText,
       0) as InsertChange;
 
@@ -221,6 +228,7 @@ export default function (options: UniversalOptions): Rule {
 
     const rootSource = apply(url('./files/root'), [
       options.skipServer ? filter(path => !path.startsWith('__serverFileName')) : noop(),
+      options.skipPrerender ? filter(path => !path.startsWith('__prerenderFileName')) : noop(),
       options.webpack ?
         filter(path => !path.includes('tsconfig')) : filter(path => !path.startsWith('webpack')),
       template({

modules/express-engine/schematics/install/schema.json

@@ -25,6 +25,11 @@
       "format": "path",
       "description": "The name of the test entry-point file."
     },
+    "prerenderFileName": {
+      "type": "string",
+      "default": "prerender.ts",
+      "description": "The name of the Prerender server file."
+    },
     "serverFileName": {
       "type": "string",
       "default": "server.ts",

modules/express-engine/schematics/install/schema.ts

@@ -23,6 +23,10 @@ export interface Schema {
    * The name of the test entry-point file.
    */
   test?: string;
+  /**
+   * The name of the Prerender script file.
+   */
+  prerenderFileName?: string;
   /**
    * The name of the Express server file.
    */
@@ -55,6 +59,10 @@ export interface Schema {
    * Skip installing dependency packages.
    */
   skipInstall?: boolean;
+  /**
+   * Skip adding Prerender script file.
+   */
+  skipPrerender?: boolean;
   /**
    * Skip adding Express server file.
    */