feat(@ngtools/webpack): compile a module map for commonjs bundles

Author: FrozenPandaz

packages/@ngtools/webpack/src/loader.ts

@@ -435,15 +435,12 @@ function _diagnoseDeps(reasons: ModuleReason[], plugin: AotPlugin, checked: Set<
 }
 
 
-export function _replaceExport(plugin: AotPlugin, refactor: TypeScriptFileRefactor) {
-  if (!plugin.replaceExport) {
-    return;
-  }
-
+export function _getModuleExports(plugin: AotPlugin,
+                                  refactor: TypeScriptFileRefactor): ts.Identifier[] {
   const exports = refactor
     .findAstNodes(refactor.sourceFile, ts.SyntaxKind.ExportDeclaration, true);
 
-  exports
+  return exports
     .filter(node => {
 
       const identifiers = refactor.findAstNodes(node, ts.SyntaxKind.Identifier, false);
@@ -452,7 +449,15 @@ export function _replaceExport(plugin: AotPlugin, refactor: TypeScriptFileRefact
         .filter(node => node.getText() === plugin.entryModule.className);
 
       return identifiers.length > 0;
-    })
+    }) as ts.Identifier[];
+}
+
+
+export function _replaceExport(plugin: AotPlugin, refactor: TypeScriptFileRefactor) {
+  if (!plugin.replaceExport) {
+    return;
+  }
+  _getModuleExports(plugin, refactor)
     .forEach(node => {
       const factoryPath = _getNgFactoryPath(plugin, refactor);
       const factoryClassName = plugin.entryModule.className + 'NgFactory';
@@ -462,6 +467,45 @@ export function _replaceExport(plugin: AotPlugin, refactor: TypeScriptFileRefact
 }
 
 
+export function _exportModuleMap(plugin: AotPlugin, refactor: TypeScriptFileRefactor) {
+  if (!plugin.replaceExport) {
+    return;
+  }
+
+  _getModuleExports(plugin, refactor)
+    .forEach(node => {
+      const routes: any[] = Object.keys(plugin.discoveredLazyRoutes)
+        .map(routeKey => {
+          let lazyRouteKey = routeKey.split('#')[0];
+          if (!plugin.skipCodeGeneration) {
+            lazyRouteKey += '.ngfactory';
+          }
+          return {
+            loadChildrenString: routeKey,
+            path: plugin.lazyRoutes[lazyRouteKey],
+            name: routeKey.split('#')[1]
+          };
+        });
+      let map: { [key: string]: string } = {};
+      routes.forEach(module => {
+        const append = plugin.skipCodeGeneration ? '' : 'NgFactory';
+        map[module.loadChildrenString] = module.name + append;
+      });
+
+      const dirName = path.normalize(path.dirname(refactor.fileName));
+      let exportStatement = `export const moduleMap = ${JSON.stringify(map)};`;
+      routes.forEach((module, index) => {
+        const moduleName = map[module.loadChildrenString];
+        const relativePath = path.relative(dirName, module.path).replace(/\\/g, '/');
+        exportStatement = exportStatement.replace(
+          `"${moduleName}"`, `__lazy_${index}__.${moduleName}`);
+        refactor.prependBefore(node, `import * as __lazy_${index}__ from './${relativePath}'`);
+      });
+      refactor.appendAfter(node, exportStatement);
+    });
+}
+
+
 // Super simple TS transpiler loader for testing / isolated usage. does not type check!
 export function ngcLoader(this: LoaderContext & { _compilation: any }, source: string | null) {
   const cb = this.async();
@@ -492,11 +536,13 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
           return Promise.resolve()
             .then(() => _removeDecorators(refactor))
             .then(() => _refactorBootstrap(plugin, refactor))
-            .then(() => _replaceExport(plugin, refactor));
+            .then(() => _replaceExport(plugin, refactor))
+            .then(() => _exportModuleMap(plugin, refactor));
         } else {
           return Promise.resolve()
             .then(() => _replaceResources(refactor))
-            .then(() => _removeModuleId(refactor));
+            .then(() => _removeModuleId(refactor))
+            .then(() => _exportModuleMap(plugin, refactor));
         }
       })
       .then(() => {

packages/@ngtools/webpack/src/plugin.ts

@@ -50,6 +50,7 @@ export class AotPlugin implements Tapable {
   private _rootFilePath: string[];
   private _compilerHost: WebpackCompilerHost;
   private _resourceLoader: WebpackResourceLoader;
+  private _discoveredLazyRoutes: LazyRouteMap;
   private _lazyRoutes: LazyRouteMap = Object.create(null);
   private _tsConfigPath: string;
   private _entryModule: string;
@@ -97,6 +98,8 @@ export class AotPlugin implements Tapable {
   get i18nFormat() { return this._i18nFormat; }
   get locale() { return this._locale; }
   get firstRun() { return this._firstRun; }
+  get lazyRoutes() { return this._lazyRoutes; }
+  get discoveredLazyRoutes() { return this._discoveredLazyRoutes; }
 
   private _setupOptions(options: AotPluginOptions) {
     // Fill in the missing options.
@@ -516,14 +519,14 @@ export class AotPlugin implements Tapable {
       .then(() => {
         // We need to run the `listLazyRoutes` the first time because it also navigates libraries
         // and other things that we might miss using the findLazyRoutesInAst.
-        let discoveredLazyRoutes: LazyRouteMap = this.firstRun
+        this._discoveredLazyRoutes = this.firstRun
           ? this._getLazyRoutesFromNgtools()
           : this._findLazyRoutesInAst();
 
         // Process the lazy routes discovered.
-        Object.keys(discoveredLazyRoutes)
+        Object.keys(this.discoveredLazyRoutes)
           .forEach(k => {
-            const lazyRoute = discoveredLazyRoutes[k];
+            const lazyRoute = this.discoveredLazyRoutes[k];
             k = k.split('#')[0];
             if (lazyRoute === null) {
               return;

tests/e2e/tests/packages/webpack/server.ts

@@ -24,6 +24,8 @@ export default function(skipCleaning: () => void) {
       '--config', 'webpack.commonjs.config.js'))
     .then(() => expectFileToMatch('dist/app.main.js',
       /__webpack_exports__, "AppModuleNgFactory"/))
+    .then(() => expectFileToMatch('dist/app.main.js',
+      /var moduleMap = { ".\/lazy\.module#LazyModule": /))
     .then(() => exec(normalize('node'), 'index.js'))
     .then(() => expectFileToMatch('dist/index.html',
       new RegExp('<a ng-reflect-router-link="lazy" href="/lazy">lazy</a>')))