feat(express-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/express-engine/schematics/install/files/root/__serverFileName@stripTsExtension__.ts

@@ -27,14 +27,11 @@ const PORT = process.env.PORT || <%= serverPort %>;
 const DIST_FOLDER = join(process.cwd(), '<%= getBrowserDistDirectory() %>');
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./<%= getServerDistDirectory() %>/main');
+const {AppServerModule, ngExpressEngine} = require('./<%= getServerDistDirectory() %>/main');
 
 // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
 app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
+  bootstrap: AppServerModule,
 }));
 
 app.set('view engine', 'html');

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

@@ -9,9 +9,9 @@ module.exports = {
     // This is our Express 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/express-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/express-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('ngExpressEngine');
-    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/express-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,53 +21,35 @@ 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,
   NodeDependencyType,
 } from '@schematics/angular/utility/dependencies';
-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 {insertAfterLastOccurrence, findNodes} 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';
+import {getWorkspace, updateWorkspace} from '@schematics/angular/utility/workspace';
+
+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/express-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: 'express',
@@ -100,23 +82,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,93 +115,54 @@ 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);
-    const clientTargets = getProjectTargets(clientProject);
-
-    if (!clientTargets.server) {
+  return async (host: Tree) => {
+    const clientProject = await getClientProject(host, options.clientProject);
+    const serverTarget = clientProject.targets.get('server');
+    if (!serverTarget) {
       // If they skipped Universal schematics and don't have a server target,
       // just get out
       return;
     }
 
-    const mainPath = normalize('/' + clientTargets.server.options.main);
+    const mainPath = normalize('/' + serverTarget.options.main);
     const mainSourceFile = getTsSourceFile(host, mainPath);
     let mainText = getTsSourceText(host, mainPath);
     const mainRecorder = host.beginUpdate(mainPath);
     const expressEngineExport = generateExport(mainSourceFile, ['ngExpressEngine'],
       '@nguniversal/express-engine');
-    const moduleMapExport = generateExport(mainSourceFile, ['provideModuleMap'],
-      '@nguniversal/module-map-ngfactory-loader');
+    const addedExports = `\n${expressEngineExport}\n`;
     const exports = findNodes(mainSourceFile, ts.SyntaxKind.ExportDeclaration);
-    const addedExports = `\n${expressEngineExport}\n${moduleMapExport}\n`;
-    const exportChange = insertAfterLastOccurrence(exports, addedExports, mainText,
-      0) as InsertChange;
+    const exportChange =
+      insertAfterLastOccurrence(exports, addedExports, mainText, 0) as InsertChange;
 
     mainRecorder.insertLeft(exportChange.pos, exportChange.toAdd);
     host.commitUpdate(mainRecorder);
   };
 }
 
 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());
@@ -230,20 +174,20 @@ export default function (options: UniversalOptions): Rule {
         filter(path => !path.includes('tsconfig')) : filter(path => !path.startsWith('webpack')),
       template({
         ...strings,
-        ...options as object,
+        ...options,
         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),
     ]);
   };