feat(@ngtools/webpack): support import syntax for loadChildren with ViewEngine

This feature ONLY matches the format below:
```
loadChildren: () => import('IMPORT_STRING').then(m => m.EXPORT_NAME)
```

It will not match nor alter variations, for instance:
- not using arrow functions
- not using `m` as the module argument
- using `await` instead of `then`
- using a default export (angular/angular#11402)

The only parts that can change are the ones in caps: IMPORT_STRING and EXPORT_NAME.

Author: filipesilva

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -8,7 +8,13 @@
 import { tags } from '@angular-devkit/core';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as path from 'path';
-import { Configuration, HashedModuleIdsPlugin, Output, debug } from 'webpack';
+import {
+  Configuration,
+  ContextReplacementPlugin,
+  HashedModuleIdsPlugin,
+  Output,
+  debug,
+} from 'webpack';
 import { AssetPatternClass } from '../../../browser/schema';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
@@ -345,6 +351,12 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
         ...extraMinimizers,
       ],
     },
-    plugins: extraPlugins,
+    plugins: [
+      // Always replace the context for the System.import in angular/core to prevent warnings.
+      // https://github.com/angular/angular/issues/11580
+      // With VE the correct context is added in @ngtools/webpack, but Ivy doesn't need it at all.
+      new ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)/),
+      ...extraPlugins,
+    ],
   };
 }

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -46,6 +46,7 @@ import {
   exportLazyModuleMap,
   exportNgFactory,
   findResources,
+  importFactory,
   registerLocaleData,
   removeDecorators,
   replaceBootstrap,
@@ -104,6 +105,7 @@ export interface AngularCompilerPluginOptions {
   logger?: logging.Logger;
   directTemplateLoading?: boolean;
   discoverLazyRoutes?: boolean;
+  importFactories?: boolean;
 
   // added to the list of lazy routes
   additionalLazyModules?: { [module: string]: string };
@@ -136,6 +138,7 @@ export class AngularCompilerPlugin {
   private _moduleResolutionCache: ts.ModuleResolutionCache;
   private _resourceLoader?: WebpackResourceLoader;
   private _discoverLazyRoutes = true;
+  private _importFactories = false;
   // Contains `moduleImportPath#exportName` => `fullModulePath`.
   private _lazyRoutes: LazyRouteMap = {};
   private _tsConfigPath: string;
@@ -294,10 +297,20 @@ export class AngularCompilerPlugin {
       this._platformTransformers = options.platformTransformers;
     }
 
-    if (options.discoverLazyRoutes !== undefined) {
+    // Determine if lazy route discovery via Compiler CLI private API should be attempted.
+    if (this._compilerOptions.enableIvy) {
+      // Never try to discover lazy routes with Ivy.
+      this._discoverLazyRoutes = false;
+    } else if (options.discoverLazyRoutes !== undefined) {
+      // The default is to discover routes, but it can be overriden.
       this._discoverLazyRoutes = options.discoverLazyRoutes;
     }
 
+    if (!this._compilerOptions.enableIvy && options.importFactories === true) {
+      // Only transform imports to use factories with View Engine.
+      this._importFactories = true;
+    }
+
     // Default ContextElementDependency to the one we can import from here.
     // Failing to use the right ContextElementDependency will throw the error below:
     // "No module factory available for dependency type: ContextElementDependency"
@@ -876,6 +889,10 @@ export class AngularCompilerPlugin {
     } else {
       // Remove unneeded angular decorators.
       this._transformers.push(removeDecorators(isAppPath, getTypeChecker));
+      // Import ngfactory in loadChildren import syntax
+      if (this._importFactories) {
+        this._transformers.push(importFactory());
+      }
     }
 
     if (this._platformTransformers !== null) {

packages/ngtools/webpack/src/transformers/import_factory.ts

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 * as ts from 'typescript';
+
+export function importFactory(): ts.TransformerFactory<ts.SourceFile> {
+  return (context: ts.TransformationContext) => {
+    const visitNode: ts.Visitor = (node: ts.Node) => {
+      // Only try to transform 'loadChildren' property assignments.
+      if (ts.isPropertyAssignment(node)) {
+        return replaceImport(node, context);
+      }
+
+      return ts.visitEachChild(node, visitNode, context);
+    };
+
+    // Only transform files that contain `loadChildren`.
+    return (sourceFile: ts.SourceFile) => (
+      /\bloadChildren\b/.test(sourceFile.text)
+        ? ts.visitNode(sourceFile, visitNode)
+        : sourceFile
+    );
+  };
+}
+
+function replaceImport(node: ts.PropertyAssignment, context: ts.TransformationContext): ts.Node {
+  // This ONLY matches the format below:
+  // loadChildren: () => import('IMPORT_STRING').then(m => m.EXPORT_NAME)
+  // It will not match nor alter variations, for instance:
+  // - not using arrow functions
+  // - not using `m` as the module argument
+  // - using `await` instead of `then`
+  // - using a default export (https://github.com/angular/angular/issues/11402)
+  // The only parts that can change are the ones in caps: IMPORT_STRING and EXPORT_NAME.
+
+
+  // Exit early if the structure is not what we expect.
+
+  // loadChildren: something
+  const name = node.name;
+  if (!(
+    ts.isIdentifier(name)
+    && name.text == 'loadChildren'
+  )) {
+    return node;
+  }
+
+  // loadChildren: () => something
+  const initializer = node.initializer;
+  if (!(
+    ts.isArrowFunction(initializer)
+    && initializer.parameters.length === 0
+  )) {
+    return node;
+  }
+
+  // loadChildren: () => something.then(something)
+  const topArrowFnBody = initializer.body;
+  if (!ts.isCallExpression(topArrowFnBody)) { return node; }
+
+  const topArrowFnBodyExpr = topArrowFnBody.expression;
+  if (!(
+    ts.isPropertyAccessExpression(topArrowFnBodyExpr)
+    && ts.isIdentifier(topArrowFnBodyExpr.name)
+  )) {
+    return node;
+  }
+  if (topArrowFnBodyExpr.name.text != 'then') { return node; }
+
+  // loadChildren: () => import('IMPORT_STRING').then(something)
+  const importCall = topArrowFnBodyExpr.expression;
+  if (!(
+    ts.isCallExpression(importCall)
+    && importCall.expression.kind === ts.SyntaxKind.ImportKeyword
+    && importCall.arguments.length === 1
+    && ts.isStringLiteral(importCall.arguments[0])
+  )) {
+    return node;
+  }
+
+  // loadChildren: () => import('IMPORT_STRING').then(m => m.EXPORT_NAME)
+  if (!(
+    topArrowFnBody.arguments.length === 1
+    && ts.isArrowFunction(topArrowFnBody.arguments[0])
+  )) {
+    return node;
+  }
+
+  const thenArrowFn = topArrowFnBody.arguments[0] as ts.ArrowFunction;
+  if (!(
+    thenArrowFn.parameters.length === 1
+    && ts.isPropertyAccessExpression(thenArrowFn.body)
+    && ts.isIdentifier(thenArrowFn.body.name)
+  )) {
+    return node;
+  }
+
+  // At this point we know what are the nodes we need to replace.
+  const importStringLit = importCall.arguments[0] as ts.StringLiteral;
+  const exportNameId = thenArrowFn.body.name;
+
+  // The easiest way to alter them is with a simple visitor.
+  const replacementVisitor: ts.Visitor = (node: ts.Node) => {
+    if (node === importStringLit) {
+      // Transform the import string.
+      return ts.createStringLiteral(importStringLit.text + '.ngfactory');
+    } else if (node === exportNameId) {
+      // Transform the export name.
+      return ts.createIdentifier(exportNameId.text + 'NgFactory');
+    }
+
+    return ts.visitEachChild(node, replacementVisitor, context);
+  };
+
+  return ts.visitEachChild(node, replacementVisitor, context);
+}

packages/ngtools/webpack/src/transformers/import_factory_spec.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 { tags } from '@angular-devkit/core';
+import { transformTypescript } from './ast_helpers';
+import { importFactory } from './import_factory';
+
+describe('@ngtools/webpack transformers', () => {
+  describe('import-factory', () => {
+    it('should support arrow functions', () => {
+      const input = tags.stripIndent`
+        const routes = [{
+          path: "lazy",
+          loadChildren: () => import("./lazy/lazy.module").then(m => m.LazyModule)
+        }];
+      `;
+      const output = tags.stripIndent`
+        const routes = [{
+          path: "lazy",
+          loadChildren: () =>
+            import("./lazy/lazy.module.ngfactory").then(m => m.LazyModuleNgFactory)
+        }];
+      `;
+
+      const transformer = importFactory();
+      const result = transformTypescript(input, [transformer]);
+
+      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
+    });
+
+    it('should not transform if the format is different than expected', () => {
+      const input = tags.stripIndent`
+        const routes = [{
+          path: "lazy",
+          loadChildren: function () { return import("./lazy/lazy.module").then(m => m.LazyModule); }
+        }];
+      `;
+
+      const transformer = importFactory();
+      const result = transformTypescript(input, [transformer]);
+
+      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${input}`);
+    });
+
+    it('should not transform if the property is not loadChildren', () => {
+      const input = tags.stripIndent`
+        const routes = [{
+          path: "lazy",
+          loadFoo: () => import("./lazy/lazy.module").then(m => m.LazyModule)
+        }];
+      `;
+
+      const transformer = importFactory();
+      const result = transformTypescript(input, [transformer]);
+
+      expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${input}`);
+    });
+  });
+});

packages/ngtools/webpack/src/transformers/index.ts

@@ -18,3 +18,4 @@ export * from './register_locale_data';
 export * from './replace_resources';
 export * from './remove_decorators';
 export * from './find_resources';
+export * from './import_factory';