fix(hapi-engine): add bundleDependencies and lazy-loading fixes (#1188)

Author: vikerman

modules/hapi-engine/schematics/BUILD.bazel

@@ -24,6 +24,7 @@ ts_library(
     module_name = "@nguniversal/hapi-engine/schematics",
     tsconfig = ":tsconfig.json",
     deps = [
+        "@npm//@angular-devkit/core",
         "@npm//@angular-devkit/schematics",
         "@npm//@schematics/angular",
         "@npm//@types/jasmine",
@@ -56,6 +57,7 @@ ng_test_library(
     tsconfig = ":tsconfig.json",
     deps = [
         ":schematics",
+        "@npm//@angular-devkit/core",
         "@npm//@angular-devkit/schematics",
         "@npm//@schematics/angular",
     ],

modules/hapi-engine/schematics/install/files/root/__serverFileName@stripTsExtension__.ts

@@ -1,25 +1,35 @@
+
+/**
+ * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
+ *
+ * If your application uses third-party dependencies, you'll need to
+ * either use Webpack or the Angular CLI's `bundleDependencies` feature
+ * in order to adequately package them for use on the server without a
+ * node_modules directory.
+ *
+ * However, due to the nature of the CLI's `bundleDependencies`, importing
+ * Angular in this file will create a different instance of Angular than
+ * the version in the compiled application code. This leads to unavoidable
+ * conflicts. Therefore, please do not explicitly import from @angular or
+ * @nguniversal in this file. You can export any needed resources
+ * from your application's main.server.ts file, as seen below with the
+ * import for `ngHapiEngine`.
+ */
+
 import 'zone.js/dist/zone-node';
-import {enableProdMode} from '@angular/core';
-// Hapi Engine
-import {ngHapiEngine} from '@nguniversal/hapi-engine';
-// Import module map for lazy loading
-import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
 
 import {Request, Server} from 'hapi';
 import * as Inert from 'inert';
 import {join} from 'path';
 
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
-
 // Hapi server
 const PORT = process.env.PORT || <%= serverPort %>;
 const server = new Server({ port: PORT, host: 'localhost' });
 
 const DIST_FOLDER = join(process.cwd(), 'dist');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./<%= clientProject %>-server/main');
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngHapiEngine, provideModuleMap} = require('./<%= clientProject %>-server/main');
 
 server.route({
   method: 'GET',

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

@@ -9,6 +9,9 @@ module.exports = {
     // This is our Hapi server for Dynamic universal
     server: './<%= stripTsExtension(serverFileName) %>.ts'
   },
+  externals: {
+    './<%= getServerDistDirectory() %>/main': 'require("./server/main")'
+  },
   target: 'node',
   resolve: { extensions: ['.ts', '.js'] },
   optimization: {
@@ -20,6 +23,7 @@ module.exports = {
     filename: '[name].js'
   },
   module: {
+    noParse: /polyfills-.*\.js/,
     rules: [
       { test: /\.ts$/, loader: 'ts-loader' },
       {

modules/hapi-engine/schematics/install/index.spec.ts

@@ -124,4 +124,15 @@ describe('Universal Schematic', () => {
     const contents = tree.readContent(filePath);
     expect(contents).toContain('ModuleMapLoaderModule');
   });
+
+  it('should add exports to main server file', async () => {
+    const tree = await schematicRunner
+      .runSchematicAsync('ng-add', defaultOptions, appTree)
+      .toPromise();
+    const filePath = '/projects/bar/src/main.server.ts';
+    const contents = tree.readContent(filePath);
+    console.log({contents});
+    expect(contents).toContain('ngHapiEngine');
+    expect(contents).toContain('provideModuleMap');
+  });
 });

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

@@ -7,33 +7,38 @@
  */
 import {experimental, strings, normalize} from '@angular-devkit/core';
 import {
-  Rule,
-  SchematicContext,
-  SchematicsException,
-  Tree,
   apply,
   chain,
+  externalSchematic,
+  filter,
   mergeWith,
+  noop,
+  Rule,
+  SchematicContext,
+  SchematicsException,
   template,
+  Tree,
   url,
-  noop,
-  filter,
-  externalSchematic,
 } from '@angular-devkit/schematics';
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
-import {getWorkspace, getWorkspacePath} from '@schematics/angular/utility/config';
+import {getWorkspace} from '@schematics/angular/utility/config';
 import {Schema as UniversalOptions} from './schema';
-import {BrowserBuilderOptions} from '@schematics/angular/utility/workspace-models';
 import {
   addPackageJsonDependency,
   NodeDependencyType,
 } from '@schematics/angular/utility/dependencies';
 import {getProject} from '@schematics/angular/utility/project';
 import {getProjectTargets} from '@schematics/angular/utility/project-targets';
-import * as ts from 'typescript';
-import {findAppServerModulePath} from './utils';
-import {addSymbolToNgModuleMetadata, insertImport} from '@schematics/angular/utility/ast-utils';
 import {InsertChange} from '@schematics/angular/utility/change';
+import {
+  addSymbolToNgModuleMetadata,
+  findNodes,
+  insertAfterLastOccurrence,
+  insertImport
+} from '@schematics/angular/utility/ast-utils';
+import * as ts from 'typescript';
+import {findAppServerModulePath, generateExport, getTsSourceFile, getTsSourceText} from './utils';
+import {updateWorkspace} from '@schematics/angular/utility/workspace';
 
 // TODO(CaerusKaru): make these configurable
 const BROWSER_DIST = 'dist/browser';
@@ -102,54 +107,50 @@ function addDependenciesAndScripts(options: UniversalOptions): Rule {
     pkg.scripts['serve:ssr'] = `node dist/${serverFileName}`;
     pkg.scripts['build:ssr'] = 'npm run build:client-and-server-bundles && npm run compile:server';
     pkg.scripts['build:client-and-server-bundles'] =
-      `ng build --prod && ng run ${options.clientProject}:server:production`;
+      // tslint:disable:max-line-length
+      `ng build --prod && ng run ${options.clientProject}:server:production --bundleDependencies all`;
 
     host.overwrite(pkgPath, JSON.stringify(pkg, null, 2));
 
     return host;
   };
 }
 
-function updateConfigFile(options: UniversalOptions): Rule {
-  return (host: Tree) => {
-    const workspace = getWorkspace(host);
-    if (!workspace.projects[options.clientProject]) {
-      throw new SchematicsException(`Client app ${options.clientProject} not found.`);
-    }
-
-    const clientProject = workspace.projects[options.clientProject];
-    if (!clientProject.architect) {
-      throw new Error('Client project architect not found.');
-    }
+function updateConfigFile(options: UniversalOptions) {
+  return updateWorkspace((workspace => {
+    const clientProject = workspace.projects.get(options.clientProject);
+    if (clientProject) {
+      const buildTarget = clientProject.targets.get('build');
+      const serverTarget = clientProject.targets.get('build');
 
-    // We have to check if the project config has a server target, because
-    // if the Universal step in this schematic isn't run, it can't be guaranteed
-    // to exist
-    if (!clientProject.architect.server) {
-      return;
-    }
-
-    clientProject.architect.server.configurations = {
-      production: {
-        fileReplacements: [
-          {
-            replace: 'src/environments/environment.ts',
-            with: 'src/environments/environment.prod.ts'
-          }
-        ]
+      // We have to check if the project config has a server target, because
+      // if the Universal step in this schematic isn't run, it can't be guaranteed
+      // to exist
+      if (!serverTarget || !buildTarget) {
+        return;
       }
-    };
-    // TODO(CaerusKaru): make this configurable
-    clientProject.architect.server.options.outputPath = SERVER_DIST;
-    // TODO(CaerusKaru): make this configurable
-    (clientProject.architect.build.options as BrowserBuilderOptions).outputPath = BROWSER_DIST;
 
-    const workspacePath = getWorkspacePath(host);
+      serverTarget.configurations = {
+        production: {
+          fileReplacements: [
+            {
+              replace: 'src/environments/environment.ts',
+              with: 'src/environments/environment.prod.ts'
+            }
+          ]
+        }
+      };
 
-    host.overwrite(workspacePath, JSON.stringify(workspace, null, 2));
+      serverTarget.options = {
+        ...serverTarget.options,
+        outputPath: SERVER_DIST,
+      };
 
-    return host;
-  };
+      buildTarget.options = {
+        outputPath: BROWSER_DIST,
+      };
+    }
+  }));
 }
 
 function addModuleMapLoader(options: UniversalOptions): Rule {
@@ -162,7 +163,6 @@ function addModuleMapLoader(options: UniversalOptions): Rule {
       return;
     }
     const mainPath = normalize('/' + clientTargets.server.options.main);
-
     const appServerModuleRelativePath = findAppServerModulePath(host, mainPath);
     const modulePath = normalize(
       `/${clientProject.root}/src/${appServerModuleRelativePath}.ts`);
@@ -194,15 +194,33 @@ function addModuleMapLoader(options: UniversalOptions): Rule {
   };
 }
 
-function getTsSourceFile(host: Tree, path: string): ts.SourceFile {
-  const buffer = host.read(path);
-  if (!buffer) {
-    throw new SchematicsException(`Could not read file (${path}).`);
-  }
-  const content = buffer.toString();
-  const source = ts.createSourceFile(path, content, ts.ScriptTarget.Latest, true);
+function addExports(options: UniversalOptions): Rule {
+  return (host: Tree) => {
+    const clientProject = getProject(host, options.clientProject);
+    const clientTargets = getProjectTargets(clientProject);
+
+    if (!clientTargets.server) {
+      // If they skipped Universal schematics and don't have a server target,
+      // just get out
+      return;
+    }
 
-  return source;
+    const mainPath = normalize('/' + clientTargets.server.options.main);
+    const mainSourceFile = getTsSourceFile(host, mainPath);
+    let mainText = getTsSourceText(host, mainPath);
+    const mainRecorder = host.beginUpdate(mainPath);
+    const hapiEngineExport = generateExport(mainSourceFile, ['ngHapiEngine'],
+      '@nguniversal/hapi-engine');
+    const moduleMapExport = generateExport(mainSourceFile, ['provideModuleMap'],
+      '@nguniversal/module-map-ngfactory-loader');
+    const exports = findNodes(mainSourceFile, ts.SyntaxKind.ExportDeclaration);
+    const addedExports = `\n${hapiEngineExport}\n${moduleMapExport}\n`;
+    const exportChange = insertAfterLastOccurrence(exports, addedExports, mainText,
+      0) as InsertChange;
+
+    mainRecorder.insertLeft(exportChange.pos, exportChange.toAdd);
+    host.commitUpdate(mainRecorder);
+  };
 }
 
 export default function (options: UniversalOptions): Rule {
@@ -236,6 +254,7 @@ export default function (options: UniversalOptions): Rule {
       mergeWith(rootSource),
       addDependenciesAndScripts(options),
       addModuleMapLoader(options),
+      addExports(options),
     ]);
   };
 }

modules/hapi-engine/schematics/install/utils.ts

@@ -9,15 +9,21 @@ import { SchematicsException, Tree } from '@angular-devkit/schematics';
 import * as ts from 'typescript';
 import {getSourceNodes} from '@schematics/angular/utility/ast-utils';
 
-export function findAppServerModuleExport(host: Tree,
-                                          mainPath: string): ts.ExportDeclaration | null {
-  const mainBuffer = host.read(mainPath);
-  if (!mainBuffer) {
-    throw new SchematicsException(`Main file (${mainPath}) not found`);
+export function getTsSourceText(host: Tree, path: string): string {
+  const buffer = host.read(path);
+  if (!buffer) {
+    throw new SchematicsException(`Could not read file (${path}).`);
   }
-  const mainText = mainBuffer.toString('utf-8');
-  const source = ts.createSourceFile(mainPath, mainText, ts.ScriptTarget.Latest, true);
+  return buffer.toString();
+}
+
+export function getTsSourceFile(host: Tree, path: string): ts.SourceFile {
+  return ts.createSourceFile(path, getTsSourceText(host, path), ts.ScriptTarget.Latest, true);
+}
 
+export function findAppServerModuleExport(host: Tree,
+                                          mainPath: string): ts.ExportDeclaration | null {
+  const source = getTsSourceFile(host, mainPath);
   const allNodes = getSourceNodes(source);
 
   let exportDeclaration: ts.ExportDeclaration | null = null;
@@ -49,6 +55,20 @@ export function findAppServerModulePath(host: Tree, mainPath: string): string {
     throw new SchematicsException('Could not find app server module export');
   }
 
-  const moduleSpecifier = exportDeclaration.moduleSpecifier.getText();
+  const moduleSpecifier = exportDeclaration.moduleSpecifier!.getText();
   return moduleSpecifier.substring(1, moduleSpecifier.length - 1);
 }
+
+export function generateExport(sourceFile: ts.SourceFile,
+                               elements: string[],
+                               module: string): string {
+  const printer = ts.createPrinter();
+  const exports = elements.map(element =>
+    ts.createExportSpecifier(undefined, element));
+  const namedExports = ts.createNamedExports(exports);
+  const moduleSpecifier = ts.createStringLiteral(module);
+  const exportDeclaration = ts.createExportDeclaration(undefined, undefined,
+    namedExports, moduleSpecifier);
+
+  return printer.printNode(ts.EmitHint.Unspecified, exportDeclaration, sourceFile);
+}