feat(@angular/cli): support additional application lazy modules

Author: clydin

packages/@angular/cli/lib/config/schema.json

@@ -263,6 +263,14 @@
             "description": "Name and corresponding file for environment config.",
             "type": "object",
             "additionalProperties": true
+          },
+          "lazyModules": {
+            "description": "List of additional NgModule files that will be lazy loaded. (lazy router modules with be discovered automatically)",
+            "type": "array",
+            "items": {
+              "type": "string",
+              "minLength": 1
+            }
           }
         },
         "additionalProperties": false

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -81,6 +81,17 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any, useMain = tru
   }
 
   if (AngularCompilerPlugin.isSupported()) {
+    const additionalLazyModules: { [module: string]: string } = {};
+    if (appConfig.lazyModules) {
+      for (const lazyModule of appConfig.lazyModules) {
+        additionalLazyModules[lazyModule] = path.resolve(
+          projectRoot,
+          appConfig.root,
+          lazyModule,
+        );
+      }
+    }
+
     const pluginOptions: AngularCompilerPluginOptions = Object.assign({}, {
       mainPath: useMain ? path.join(projectRoot, appConfig.root, appConfig.main) : undefined,
       i18nInFile: buildOptions.i18nFile,
@@ -92,6 +103,7 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any, useMain = tru
       missingTranslation: buildOptions.missingTranslation,
       hostReplacementPaths,
       sourceMap: buildOptions.sourcemaps,
+      additionalLazyModules,
     }, options);
     return new AngularCompilerPlugin(pluginOptions);
   } else {

tests/e2e/tests/build/dynamic-import.ts

@@ -0,0 +1,46 @@
+import * as fs from 'fs';
+import { writeFile } from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+
+
+export default async function() {
+  // Add a lazy module
+  await ng('generate', 'module', 'lazy');
+  await updateJsonFile('.angular-cli.json', configJson => {
+    const app = configJson['apps'][0];
+    app['lazyModules'] = [
+      'app/lazy/lazy.module'
+    ];
+  });
+
+  // Update the app component to use the lazy module
+  await writeFile('src/app/app.component.ts', `
+    import { Component, SystemJsNgModuleLoader } from '@angular/core';
+
+    @Component({
+      selector: 'app-root',
+      templateUrl: './app.component.html',
+      styleUrls: ['./app.component.css'],
+    })
+    export class AppComponent {
+      title = 'app';
+      constructor(loader: SystemJsNgModuleLoader) {
+        // Module will be split at build time and loaded when requested below
+        loader.load('app/lazy/lazy.module#LazyModule')
+          .then((factory) => { /* Use factory here */ });
+      }
+    }
+  `);
+
+  // Build and look for the split lazy module
+  await ng('build');
+  for (const file of fs.readdirSync('./dist')) {
+    if (file === 'lazy.module.chunk.js') {
+      // Lazy module chunk was found and succesfully split
+      return;
+    }
+  }
+
+  throw new Error('Lazy module chunk not created');
+}