fix(@ngtools/webpack): don't override context module deps (angular#4153)

Fix angular#2496

Author: filipesilva

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

@@ -4,9 +4,9 @@ import * as ts from 'typescript';
 
 import {__NGTOOLS_PRIVATE_API_2} from '@angular/compiler-cli';
 import {AngularCompilerOptions} from '@angular/tsc-wrapped';
+const ContextElementDependency = require('webpack/lib/dependencies/ContextElementDependency');
 
 import {WebpackResourceLoader} from './resource_loader';
-import {createResolveDependenciesFromContextMap} from './utils';
 import {WebpackCompilerHost} from './compiler_host';
 import {resolveEntryModuleFromMain} from './entry_resolver';
 import {Tapable} from './webpack';
@@ -194,29 +194,27 @@ export class AotPlugin implements Tapable {
   apply(compiler: any) {
     this._compiler = compiler;
 
+    // Add lazy modules to the context module for @angular/core/src/linker
     compiler.plugin('context-module-factory', (cmf: any) => {
-      cmf.plugin('before-resolve', (request: any, callback: (err?: any, request?: any) => void) => {
-        if (!request) {
-          return callback();
-        }
-
-        request.request = this.skipCodeGeneration ? this.basePath : this.genDir;
-        request.recursive = true;
-        request.dependencies.forEach((d: any) => d.critical = false);
-        return callback(null, request);
-      });
       cmf.plugin('after-resolve', (result: any, callback: (err?: any, request?: any) => void) => {
         if (!result) {
           return callback();
         }
 
+        // alter only request from @angular/core/src/linker
+        if (!result.resource.endsWith(path.join('@angular/core/src/linker'))) {
+          return callback(null, result);
+        }
+
         this.done.then(() => {
           result.resource = this.skipCodeGeneration ? this.basePath : this.genDir;
           result.recursive = true;
           result.dependencies.forEach((d: any) => d.critical = false);
-          result.resolveDependencies = createResolveDependenciesFromContextMap(
-            (_: any, cb: any) => cb(null, this._lazyRoutes));
-
+          result.resolveDependencies = (p1: any, p2: any, p3: any, p4: RegExp, cb: any ) => {
+            const dependencies = Object.keys(this._lazyRoutes)
+              .map((key) => new ContextElementDependency(this._lazyRoutes[key], key));
+            cb(null, dependencies);
+          };
           return callback(null, result);
         }, () => callback(null))
         .catch(err => callback(err));

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

@@ -1,8 +1,9 @@
 import {readdirSync} from 'fs';
 import {oneLine} from 'common-tags';
 
-import {ng} from '../../utils/process';
+import {ng, npm} from '../../utils/process';
 import {addImportToModule} from '../../utils/ast';
+import {appendToFile, writeFile} from '../../utils/fs';
 
 
 export default function() {
@@ -21,13 +22,43 @@ export default function() {
       if (oldNumberOfFiles >= currentNumberOfDistFiles) {
         throw new Error('A bundle for the lazy module was not created.');
       }
+      oldNumberOfFiles = currentNumberOfDistFiles;
+    })
+    // verify System.import still works
+    .then(() => writeFile('src/app/lazy-file.ts', ''))
+    .then(() => appendToFile('src/app/app.component.ts', `
+      // verify other System.import still work
+      declare var System: any;
+      const lazyFile = 'file';
+      System.import('./lazy-' + lazyFile);
+    `))
+    .then(() => ng('build'))
+    .then(() => readdirSync('dist').length)
+    .then(currentNumberOfDistFiles => {
+      if (oldNumberOfFiles >= currentNumberOfDistFiles) {
+        throw new Error('A bundle for the lazy file was not created.');
+      }
+      oldNumberOfFiles = currentNumberOfDistFiles;
+    })
+    // verify 'import *' syntax doesn't break lazy modules
+    .then(() => npm('install', 'moment'))
+    .then(() => appendToFile('src/app/app.component.ts', `
+      import * as moment from 'moment';
+      console.log(moment);
+    `))
+    .then(() => ng('build'))
+    .then(() => readdirSync('dist').length)
+    .then(currentNumberOfDistFiles => {
+      if (oldNumberOfFiles != currentNumberOfDistFiles) {
+        throw new Error('Bundles were not created after adding \'import *\'.');
+      }
     })
     // Check for AoT and lazy routes.
     .then(() => ng('build', '--aot'))
     .then(() => readdirSync('dist').length)
     .then(currentNumberOfDistFiles => {
-      if (oldNumberOfFiles >= currentNumberOfDistFiles) {
-        throw new Error('A bundle for the lazy module was not created.');
+      if (oldNumberOfFiles != currentNumberOfDistFiles) {
+        throw new Error('AoT build contains a different number of files.');
       }
     });
 }