Webpack peer dependency fixes

package.json

@@ -80,7 +80,7 @@
     "@types/request": "^2.47.0",
     "@types/semver": "^5.3.30",
     "@types/source-map": "0.5.2",
-    "@types/webpack": "^4.1.3",
+    "@types/webpack": "^4.4.0",
     "@types/webpack-dev-server": "^2.9.4",
     "@types/webpack-sources": "^0.1.4",
     "ajv": "~6.4.0",
@@ -137,8 +137,8 @@
     "semver": "^5.3.0",
     "semver-intersect": "^1.1.2",
     "source-map": "^0.5.6",
-    "source-map-support": "^0.5.0",
     "source-map-loader": "^0.2.3",
+    "source-map-support": "^0.5.0",
     "stats-webpack-plugin": "^0.6.2",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",
@@ -153,7 +153,7 @@
     "typescript": "~2.7.2",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.1",
-    "webpack": "~4.10.2",
+    "webpack": "~4.11.1",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-dev-server": "^3.1.4",
     "webpack-merge": "^4.1.2",

packages/angular_devkit/build_angular/package.json

@@ -49,7 +49,7 @@
     "tree-kill": "^1.2.0",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.1",
-    "webpack": "~4.10.2",
+    "webpack": "~4.11.1",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-dev-server": "^3.1.4",
     "webpack-merge": "^4.1.2",

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

@@ -189,7 +189,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
   }
 
   // set base rules to derive final rules from
-  const baseRules: webpack.NewUseRule[] = [
+  const baseRules: webpack.Rule[] = [
     { test: /\.css$/, use: [] },
     {
       test: /\.scss$|\.sass$/, use: [{

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

@@ -72,6 +72,7 @@ function _createAotPlugin(
     additionalLazyModules,
     nameLazyFiles: buildOptions.namedChunks,
     forkTypeChecker: buildOptions.forkTypeChecker,
+    contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
     ...options,
     host,
   };

packages/angular_devkit/build_webpack/package.json

@@ -14,7 +14,7 @@
     "rxjs": "^6.0.0"
   },
   "peerDependencies": {
-    "webpack": "~4.6.0",
+    "webpack": "^4.6.0",
     "webpack-dev-server": "^3.1.4"
   }
 }

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

@@ -54,10 +54,13 @@ import {
   VirtualWatchFileSystemDecorator,
 } from './virtual_file_system_decorator';
 
-
-const ContextElementDependency = require('webpack/lib/dependencies/ContextElementDependency');
 const treeKill = require('tree-kill');
 
+export interface ContextElementDependency {}
+
+export interface ContextElementDependencyConstructor {
+  new(modulePath: string, name: string): ContextElementDependency;
+}
 
 /**
  * Option Constants
@@ -86,6 +89,10 @@ 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.
+  contextElementDependencyConstructor?: ContextElementDependencyConstructor;
+
   // Use tsconfig to include path globs.
   compilerOptions?: ts.CompilerOptions;
 
@@ -128,6 +135,7 @@ export class AngularCompilerPlugin {
   private _normalizedLocale: string | null;
   private _warnings: (string | Error)[] = [];
   private _errors: (string | Error)[] = [];
+  private _contextElementDependencyConstructor: ContextElementDependencyConstructor;
 
   // TypeChecker process.
   private _forkTypeChecker = true;
@@ -267,6 +275,15 @@ export class AngularCompilerPlugin {
       this._platformTransformers = options.platformTransformers;
     }
 
+    // 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"
+    // 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 = options.contextElementDependencyConstructor
+      || require('webpack/lib/dependencies/ContextElementDependency');
+
     // Create the webpack compiler host.
     const webpackCompilerHost = new WebpackCompilerHost(
       this._compilerOptions,
@@ -633,7 +650,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;
                 }