feat(hapi-engine): update schematics to generate Ivy compatable code

With this change by default we support `ng add` only on Ivy applications.

Users wishing to add this package in a non ivy project will need to this manually.

**Note:**: for Ivy users are required to use `bundleDependencies` which is turned on by default in CLI version 9. Users opting out of `bundleDependencies` will need to run `ivy-ngcc` manually. The latter is rerquired because when not bundling the server using webpack during runtime Node will resolve the packages to their VE version.

Author: Alan Agius

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

@@ -29,18 +29,15 @@ 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, ngHapiEngine, provideModuleMap} = require('./<%= clientProject %>-server/main');
+const {AppServerModule, ngHapiEngine} = require('./<%= getServerDistDirectory() %>/main');
 
 server.route({
   method: 'GET',
   path: '*',
   handler: (req: Request) =>
     ngHapiEngine({
-      bootstrap: AppServerModuleNgFactory,
+      bootstrap: AppServerModule,
       req,
-      providers: [
-        provideModuleMap(LAZY_MODULE_MAP)
-      ]
     })
 });
 

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

@@ -9,9 +9,9 @@ module.exports = {
     // This is our Hapi server for Dynamic universal
     server: './<%= stripTsExtension(serverFileName) %>.ts'
   },
-  externals: {
-    './<%= getServerDistDirectory() %>/main': 'require("./server/main")'
-  },
+  externals: [
+    './<%= getServerDistDirectory() %>/main'
+  ],
   target: 'node',
   resolve: { extensions: ['.ts', '.js'] },
   optimization: {

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

@@ -25,17 +25,6 @@ describe('Universal Schematic', () => {
     schematicRunner = new SchematicTestRunner('schematics', collectionPath);
   });
 
-  it('should add dependency: @nguniversal/module-map-ngfactory-loader',
-     async () => {
-       const tree = await schematicRunner
-                        .runSchematicAsync('ng-add', defaultOptions, appTree)
-                        .toPromise();
-       const filePath = '/package.json';
-       const contents = tree.readContent(filePath);
-       expect(contents).toMatch(
-           /\"@nguniversal\/module-map-ngfactory-loader\": \"/);
-     });
-
   it('should add dependency: @nguniversal/hapi-engine', async () => {
     const tree = await schematicRunner
                      .runSchematicAsync('ng-add', defaultOptions, appTree)
@@ -116,23 +105,13 @@ describe('Universal Schematic', () => {
     expect(contents).toMatch('');
   });
 
-  it('should add module map loader to server module imports', async () => {
-    const tree =
-        await schematicRunner.runSchematicAsync('ng-add', defaultOptions, appTree)
-            .toPromise();
-    const filePath = '/projects/bar/src/app/app.server.module.ts';
-    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);
     expect(contents).toContain('ngHapiEngine');
-    expect(contents).toContain('provideModuleMap');
   });
 
   it('should update angular.json', async () => {
@@ -142,8 +121,8 @@ describe('Universal Schematic', () => {
     const contents = JSON.parse(tree.readContent('angular.json'));
     const architect = contents.projects.bar.architect;
     expect(architect.build.configurations.production).toBeDefined();
-    expect(architect.build.options.outputPath).toBe('dist/browser');
-    expect(architect.server.options.outputPath).toBe('dist/server');
+    expect(architect.build.options.outputPath).toBe('dist/bar/browser');
+    expect(architect.server.options.outputPath).toBe('dist/bar/server');
 
     const productionConfig = architect.server.configurations.production;
     expect(productionConfig.fileReplacements).toBeDefined();

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

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {experimental, strings, normalize} from '@angular-devkit/core';
+import {strings, normalize, workspaces, join} from '@angular-devkit/core';
 import {
   apply,
   chain,
@@ -21,7 +21,6 @@ import {
   url,
 } from '@angular-devkit/schematics';
 import {NodePackageInstallTask} from '@angular-devkit/schematics/tasks';
-import {getWorkspace} from '@schematics/angular/utility/config';
 import {Schema as UniversalOptions} from './schema';
 import {
   addPackageJsonDependency,
@@ -30,44 +29,29 @@ import {
 import {getProject} from '@schematics/angular/utility/project';
 import {getProjectTargets} from '@schematics/angular/utility/project-targets';
 import {InsertChange} from '@schematics/angular/utility/change';
-import {
-  addSymbolToNgModuleMetadata,
-  findNodes,
-  insertAfterLastOccurrence,
-  insertImport
-} from '@schematics/angular/utility/ast-utils';
+import {getWorkspace, updateWorkspace} from '@schematics/angular/utility/workspace';
+import {findNodes, insertAfterLastOccurrence} 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';
-const SERVER_DIST = 'dist/server';
-
-function getClientProject(
-  host: Tree, options: UniversalOptions,
-): experimental.workspace.WorkspaceProject {
-  const workspace = getWorkspace(host);
-  const clientProject = workspace.projects[options.clientProject];
-  if (!clientProject) {
-    throw new SchematicsException(`Client app ${options.clientProject} not found.`);
+import {generateExport, getTsSourceFile, getTsSourceText} from './utils';
+
+async function getClientProject(host, projectName: string): Promise<workspaces.ProjectDefinition> {
+  const workspace = await getWorkspace(host);
+  const clientProject = workspace.projects.get(projectName);
+
+  if (!clientProject || clientProject.extensions.projectType !== 'application') {
+    throw new SchematicsException(`Universal requires a project type of "application".`);
   }
 
   return clientProject;
 }
 
-function addDependenciesAndScripts(options: UniversalOptions): Rule {
+function addDependenciesAndScripts(options: UniversalOptions, serverDist: string): Rule {
   return (host: Tree) => {
     addPackageJsonDependency(host, {
       type: NodeDependencyType.Default,
       name: '@nguniversal/hapi-engine',
       version: '0.0.0-PLACEHOLDER',
     });
-    addPackageJsonDependency(host, {
-      type: NodeDependencyType.Default,
-      name: '@nguniversal/module-map-ngfactory-loader',
-      version: '0.0.0-PLACEHOLDER',
-    });
     addPackageJsonDependency(host, {
       type: NodeDependencyType.Default,
       name: 'hapi',
@@ -100,23 +84,24 @@ function addDependenciesAndScripts(options: UniversalOptions): Rule {
     }
 
     const pkg = JSON.parse(buffer.toString());
-
-    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:ssr'] = 'npm run build:client-and-server-bundles && npm run compile:server';
-    pkg.scripts['build:client-and-server-bundles'] =
-      // tslint:disable:max-line-length
-      `ng build --prod && ng run ${options.clientProject}:server:production --bundleDependencies all`;
+    pkg.scripts = {
+      ...pkg.scripts,
+      'compile:server': options.webpack
+        ? 'webpack --config webpack.server.config.js --progress --colors'
+        : `tsc -p ${serverFileName}.tsconfig.json`,
+      'serve:ssr': `node ${serverDist.substr(1)}/${serverFileName}`,
+      'build:ssr': 'npm run build:client-and-server-bundles && npm run compile:server',
+      // tslint:disable-next-line: max-line-length
+      'build:client-and-server-bundles': `ng build --prod && ng run ${options.clientProject}:server:production`,
+    };
 
     host.overwrite(pkgPath, JSON.stringify(pkg, null, 2));
 
     return host;
   };
 }
 
-function updateConfigFile(options: UniversalOptions) {
+function updateConfigFile(options: UniversalOptions, browserDist: string, serverDist: string) {
   return updateWorkspace((workspace => {
     const clientProject = workspace.projects.get(options.clientProject);
     if (clientProject) {
@@ -132,58 +117,17 @@ function updateConfigFile(options: UniversalOptions) {
 
       serverTarget.options = {
         ...serverTarget.options,
-        outputPath: SERVER_DIST,
+        outputPath: serverDist,
       };
 
       buildTarget.options = {
         ...buildTarget.options,
-        outputPath: BROWSER_DIST,
+        outputPath: browserDist,
       };
     }
   }));
 }
 
-function addModuleMapLoader(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;
-    }
-    const mainPath = normalize('/' + clientTargets.server.options.main);
-    const appServerModuleRelativePath = findAppServerModulePath(host, mainPath);
-    const modulePath = normalize(
-      `/${clientProject.root}/src/${appServerModuleRelativePath}.ts`);
-
-    // Add the module map loader import
-    let moduleSource = getTsSourceFile(host, modulePath);
-    const importModule = 'ModuleMapLoaderModule';
-    const importPath = '@nguniversal/module-map-ngfactory-loader';
-    const moduleMapImportChange = insertImport(moduleSource, modulePath, importModule,
-      importPath) as InsertChange;
-    if (moduleMapImportChange) {
-      const recorder = host.beginUpdate(modulePath);
-      recorder.insertLeft(moduleMapImportChange.pos, moduleMapImportChange.toAdd);
-      host.commitUpdate(recorder);
-    }
-
-    // Add the module map loader module to the imports
-    const importText = 'ModuleMapLoaderModule';
-    moduleSource = getTsSourceFile(host, modulePath);
-    const metadataChanges = addSymbolToNgModuleMetadata(
-      moduleSource, modulePath, 'imports', importText);
-    if (metadataChanges) {
-      const recorder = host.beginUpdate(modulePath);
-      metadataChanges.forEach((change: InsertChange) => {
-        recorder.insertRight(change.pos, change.toAdd);
-      });
-      host.commitUpdate(recorder);
-    }
-  };
-}
-
 function addExports(options: UniversalOptions): Rule {
   return (host: Tree) => {
     const clientProject = getProject(host, options.clientProject);
@@ -201,10 +145,8 @@ function addExports(options: UniversalOptions): Rule {
     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 addedExports = `\n${hapiEngineExport}\n`;
     const exportChange = insertAfterLastOccurrence(exports, addedExports, mainText,
       0) as InsertChange;
 
@@ -214,11 +156,16 @@ function addExports(options: UniversalOptions): Rule {
 }
 
 export default function (options: UniversalOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    const clientProject = getClientProject(host, options);
-    if (clientProject.projectType !== 'application') {
-      throw new SchematicsException(`Universal requires a project type of "application".`);
-    }
+  return async (host: Tree, context: SchematicContext) => {
+    // Generate new output paths
+    const clientProject = await getClientProject(host, options.clientProject);
+    const {options: buildOptions} = clientProject.targets.get('build');
+    const clientOutputPath = normalize(
+         typeof buildOptions.outputPath === 'string' ? buildOptions.outputPath : 'dist'
+    );
+
+    const browserDist = join(clientOutputPath, 'browser');
+    const serverDist = join(clientOutputPath, 'server');
 
     if (!options.skipInstall) {
       context.addTask(new NodePackageInstallTask());
@@ -232,18 +179,18 @@ export default function (options: UniversalOptions): Rule {
         ...strings,
         ...options as object,
         stripTsExtension: (s: string) => s.replace(/\.ts$/, ''),
-        getBrowserDistDirectory: () => BROWSER_DIST,
-        getServerDistDirectory: () => SERVER_DIST,
+        // remove the leading slashes
+        getBrowserDistDirectory: () => browserDist.substr(1),
+        getServerDistDirectory: () => serverDist.substr(1),
       })
     ]);
 
     return chain([
       options.skipUniversal ?
         noop() : externalSchematic('@schematics/angular', 'universal', options),
-      updateConfigFile(options),
+      updateConfigFile(options, browserDist, serverDist),
       mergeWith(rootSource),
-      addDependenciesAndScripts(options),
-      addModuleMapLoader(options),
+      addDependenciesAndScripts(options, serverDist),
       addExports(options),
     ]);
   };