feat(@ngtools/webpack): allow passing in the right ContextElementDependency class

This should allow multiple webpack versions in the workspace dependencies with no weird errors.

Fix #6417 for good.

Author: filipesilva

packages/ngtools/webpack/README.md

@@ -42,6 +42,7 @@ The loader works with webpack plugin to compile your TypeScript. It's important
 * `skipCodeGeneration`. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources.
 * `sourceMap`. Optional. Include sourcemaps.
 * `compilerOptions`. Optional. Override options in `tsconfig.json`.
+* `contextElementDependencyConstructor`. Optional. Set to `require('webpack/lib/dependencies/ContextElementDependency')` if you are having `No module factory available for dependency type: ContextElementDependency` errors.
 
 ## Features
 The benefits and ability of using [`@ngtools/webpack`](https://www.npmjs.com/~ngtools) standalone from the Angular CLI as presented in [Stephen Fluin's Angular CLI talk](https://youtu.be/uBRK6cTr4Vk?t=6m45s) at Angular Connect 2016:

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -13,6 +13,7 @@ import { ChildProcess, ForkOptions, fork } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as ts from 'typescript';
+import * as webpack from 'webpack';
 import { time, timeEnd } from './benchmark';
 import { WebpackCompilerHost, workaroundResolve } from './compiler_host';
 import { resolveEntryModuleFromMain } from './entry_resolver';
@@ -54,10 +55,13 @@ import {
   VirtualWatchFileSystemDecorator,
 } from './virtual_file_system_decorator';
 
-
-const ContextElementDependency = require('webpack/lib/dependencies/ContextElementDependency');
 const treeKill = require('tree-kill');
 
+interface ContextElementDependency {}
+
+interface ContextElementDependencyConstructor {
+  new(modulePath: string, name: string): ContextElementDependency;
+}
 
 /**
  * Option Constants
@@ -86,6 +90,11 @@ export interface AngularCompilerPluginOptions {
   // added to the list of lazy routes
   additionalLazyModules?: { [module: string]: string };
 
+  // The ContextElementDependency of correct Webpack compilation.
+  // This is needed when there are multiple Webpack installs.
+  // tslint:disable-next-line:no-any
+  contextElementDependencyConstructor?: ContextElementDependencyConstructor;
+
   // Use tsconfig to include path globs.
   compilerOptions?: ts.CompilerOptions;
 
@@ -128,6 +137,8 @@ export class AngularCompilerPlugin {
   private _normalizedLocale: string | null;
   private _warnings: (string | Error)[] = [];
   private _errors: (string | Error)[] = [];
+  // tslint:disable-next-line:no-any
+  private _contextElementDependencyConstructor: ContextElementDependencyConstructor;
 
   // TypeChecker process.
   private _forkTypeChecker = true;
@@ -267,6 +278,17 @@ export class AngularCompilerPlugin {
       this._platformTransformers = options.platformTransformers;
     }
 
+    // Default ContextElementDependency to the one we can import from here.
+    if (options.contextElementDependencyConstructor === undefined) {
+    // Failing to use the right ContextElementDependency will throw the error below:
+    // "No module factory available for dependency type: ContextElementDependency"
+    // Hoisting together with peer dependencies can make it so the imported
+    // ContextElementDependency does not come from the same Webpack instance that is used
+    // in the compilation. In that case, we can pass the right one as an option to the plugin.
+      this._contextElementDependencyConstructor =
+        require('webpack/lib/dependencies/ContextElementDependency');
+    }
+
     // Create the webpack compiler host.
     const webpackCompilerHost = new WebpackCompilerHost(
       this._compilerOptions,
@@ -633,7 +655,7 @@ export class AngularCompilerPlugin {
                 if (modulePath !== null) {
                   const name = importPath.replace(/(\.ngfactory)?\.(js|ts)$/, '');
 
-                  return new ContextElementDependency(modulePath, name);
+                  return new this._contextElementDependencyConstructor(modulePath, name);
                 } else {
                   return null;
                 }