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.

Author: clydin

packages/ngtools/webpack/src/inline-data-loader.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Compilation, LoaderContext } from 'webpack';
+import type { Compilation, LoaderContext } from 'webpack';
 
 export const InlineAngularResourceSymbol = Symbol();
 

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[]>();

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';
@@ -124,6 +117,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(

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 {
   CompilationWithInlineAngularResource,
   InlineAngularResourceSymbol,
@@ -142,7 +142,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,
@@ -204,7 +205,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();

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));
 }