From e09dc5c2ae56573e56f64f62421e604f86c91b29 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 8 Jun 2021 20:09:15 -0400
Subject: [PATCH] fix(@ngtools/webpack): ensure plugin provided Webpack
 instance is used

Webpack 5 provides the Webpack instance as a property on the Webpack compiler which allows Webpack plugins to leverage the same Webpack instance that was used to initiate the build. The `AngularWebpackPlugin` now will only use the provided instance to ensure that differing Webpack instances and/or versions are not used.

(cherry picked from commit 0c2a862db00ccfe3d309c34b3788001c719aa21d)
---
 packages/ngtools/webpack/src/ivy/cache.ts           |  1 -
 packages/ngtools/webpack/src/ivy/plugin.ts          | 11 +++--------
 packages/ngtools/webpack/src/resource_loader.ts     |  7 ++++---
 packages/ngtools/webpack/src/webpack-diagnostics.ts |  6 +++---
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/ngtools/webpack/src/ivy/cache.ts b/packages/ngtools/webpack/src/ivy/cache.ts
index c3fac83e8f9b..0448906aa87c 100644
--- a/packages/ngtools/webpack/src/ivy/cache.ts
+++ b/packages/ngtools/webpack/src/ivy/cache.ts
@@ -7,7 +7,6 @@
  */
 
 import * as ts from 'typescript';
-import { normalizePath } from './paths';
 
 export class SourceFileCache extends Map<string, ts.SourceFile> {
   private readonly angularDiagnostics = new Map<ts.SourceFile, ts.Diagnostic[]>();
diff --git a/packages/ngtools/webpack/src/ivy/plugin.ts b/packages/ngtools/webpack/src/ivy/plugin.ts
index b64cb689de4e..43261e51e532 100644
--- a/packages/ngtools/webpack/src/ivy/plugin.ts
+++ b/packages/ngtools/webpack/src/ivy/plugin.ts
@@ -10,14 +10,7 @@ import { CompilerHost, CompilerOptions, readConfiguration } from '@angular/compi
 import { NgtscProgram } from '@angular/compiler-cli/src/ngtsc/program';
 import { createHash } from 'crypto';
 import * as ts from 'typescript';
-import {
-  Compilation,
-  Compiler,
-  Module,
-  NormalModule,
-  NormalModuleReplacementPlugin,
-  util,
-} from 'webpack';
+import type { Compilation, Compiler, Module, NormalModule } from 'webpack';
 import { NgccProcessor } from '../ngcc_processor';
 import { TypeScriptPathsPlugin } from '../paths-plugin';
 import { WebpackResourceLoader } from '../resource_loader';
@@ -119,6 +112,8 @@ export class AngularWebpackPlugin {
   }
 
   apply(compiler: Compiler): void {
+    const { NormalModuleReplacementPlugin, util } = compiler.webpack;
+
     // Setup file replacements with webpack
     for (const [key, value] of Object.entries(this.pluginOptions.fileReplacements)) {
       new NormalModuleReplacementPlugin(
diff --git a/packages/ngtools/webpack/src/resource_loader.ts b/packages/ngtools/webpack/src/resource_loader.ts
index 6868e103afda..f73a90fdaf65 100644
--- a/packages/ngtools/webpack/src/resource_loader.ts
+++ b/packages/ngtools/webpack/src/resource_loader.ts
@@ -9,7 +9,7 @@
 import { createHash } from 'crypto';
 import * as path from 'path';
 import * as vm from 'vm';
-import { Asset, Compilation, EntryPlugin, NormalModule, library, node, sources } from 'webpack';
+import type { Asset, Compilation } from 'webpack';
 import { normalizePath } from './ivy/paths';
 
 interface CompilationOutput {
@@ -131,7 +131,8 @@ export class WebpackResourceLoader {
       },
     };
 
-    const context = this._parentCompilation.compiler.context;
+    const { context, webpack } = this._parentCompilation.compiler;
+    const { EntryPlugin, NormalModule, library, node, sources } = webpack;
     const childCompiler = this._parentCompilation.createChildCompiler(
       'angular-compiler:resource',
       outputOptions,
@@ -191,7 +192,7 @@ export class WebpackResourceLoader {
     let finalMap: string | undefined;
     childCompiler.hooks.compilation.tap('angular-compiler', (childCompilation) => {
       childCompilation.hooks.processAssets.tap(
-        { name: 'angular-compiler', stage: Compilation.PROCESS_ASSETS_STAGE_REPORT },
+        { name: 'angular-compiler', stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT },
         () => {
           finalContent = childCompilation.assets[outputFilePath]?.source().toString();
           finalMap = childCompilation.assets[outputFilePath + '.map']?.source().toString();
diff --git a/packages/ngtools/webpack/src/webpack-diagnostics.ts b/packages/ngtools/webpack/src/webpack-diagnostics.ts
index 41584a617e82..d04c34f3ef04 100644
--- a/packages/ngtools/webpack/src/webpack-diagnostics.ts
+++ b/packages/ngtools/webpack/src/webpack-diagnostics.ts
@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Compilation, WebpackError } from 'webpack';
+import type { Compilation } from 'webpack';
 
 export function addWarning(compilation: Compilation, message: string): void {
-  compilation.warnings.push(new WebpackError(message));
+  compilation.warnings.push(new compilation.compiler.webpack.WebpackError(message));
 }
 
 export function addError(compilation: Compilation, message: string): void {
-  compilation.errors.push(new WebpackError(message));
+  compilation.errors.push(new compilation.compiler.webpack.WebpackError(message));
 }