fix(@angular-devkit/build-angular): fixes deprecation warning for MainTemplate.hooks.assetPath in webpack 5

Author: valorkin

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -141,23 +141,26 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           extraPlugins.push({
             apply(compiler) {
               compiler.hooks.compilation.tap('build-angular', compilation => {
-                // Webpack typings do not contain MainTemplate assetPath hook
-                // The webpack.Compilation assetPath hook is a noop in 4.x so the template must be used
-                // tslint:disable-next-line: no-any
-                (compilation.mainTemplate.hooks as any).assetPath.tap(
-                  'build-angular',
-                  (
-                    filename: string | ((data: { chunk: compilation.Chunk }) => string),
-                    data: { chunk: compilation.Chunk },
-                  ) => {
-                    const assetName = typeof filename === 'function' ? filename(data) : filename;
-                    const isMap = assetName && assetName.endsWith('.map');
-
-                    return data.chunk && data.chunk.name === 'polyfills-es5'
-                      ? `polyfills-es5${hashFormat.chunk}.js${isMap ? '.map' : ''}`
-                      : assetName;
-                  },
-                );
+                const assetPath = (
+                  filename: string | ((data: { chunk: compilation.Chunk }) => string),
+                  data: { chunk: compilation.Chunk },
+                ) => {
+                  const assetName = typeof filename === 'function' ? filename(data) : filename;
+                  const isMap = assetName?.endsWith('.map');
+
+                  return data.chunk?.name === 'polyfills-es5'
+                    ? `polyfills-es5${hashFormat.chunk}.js${isMap ? '.map' : ''}`
+                    : assetName;
+                };
+
+                if (isWebpackFiveOrHigher()) {
+                  compilation.hooks.assetPath.tap('remove-hash-plugin', assetPath);
+                } else {
+                  const mainTemplate = compilation.mainTemplate as typeof compilation.mainTemplate & {
+                    hooks: typeof compilation['hooks'];
+                  };
+                  mainTemplate.hooks.assetPath.tap('build-angular', assetPath);
+                }
               });
             },
           });

packages/angular_devkit/build_angular/src/webpack/plugins/remove-hash-plugin.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { Compiler } from 'webpack';
+import { isWebpackFiveOrHigher } from '../../utils/webpack-version';
 import { HashFormat } from '../utils/helpers';
 
 
@@ -20,25 +21,28 @@ export class RemoveHashPlugin {
 
   apply(compiler: Compiler): void {
     compiler.hooks.compilation.tap('remove-hash-plugin', compilation => {
-      const mainTemplate = compilation.mainTemplate as typeof compilation.mainTemplate & {
-        hooks: typeof compilation['hooks'];
+      const assetPath = (path: string, data: { chunk?: { name: string } }) => {
+        const chunkName = data.chunk?.name;
+        const { chunkNames, hashFormat } = this.options;
+
+        if (chunkName && chunkNames?.includes(chunkName)) {
+          // Replace hash formats with empty strings.
+          return path
+            .replace(hashFormat.chunk, '')
+            .replace(hashFormat.extract, '');
+        }
+
+        return path;
       };
 
-      mainTemplate.hooks.assetPath.tap('remove-hash-plugin',
-        (path: string, data: { chunk?: { name: string } }) => {
-          const chunkName = data.chunk && data.chunk.name;
-          const { chunkNames, hashFormat } = this.options;
-
-          if (chunkName && chunkNames.includes(chunkName)) {
-            // Replace hash formats with empty strings.
-            return path
-              .replace(hashFormat.chunk, '')
-              .replace(hashFormat.extract, '');
-          }
-
-          return path;
-        },
-      );
+      if (isWebpackFiveOrHigher()) {
+        compilation.hooks.assetPath.tap('remove-hash-plugin', assetPath);
+      } else {
+        const mainTemplate = compilation.mainTemplate as typeof compilation.mainTemplate & {
+          hooks: typeof compilation['hooks'];
+        };
+        mainTemplate.hooks.assetPath.tap('remove-hash-plugin', assetPath);
+      }
     });
   }
 }