fix(@angular-devkit/build-angular): prevent webpack from adding suffi…

…xes to polyfills files

The ES5 polyfills file was erroneously being suffixed with `es2015`.  The webpack configuration does not support conditional customization per chunk for the output filenames (`chunkFilename` option schema only supports string values).  This change adds an additional small webpack plugin that allows the chunk filenames to be adjusted based on the chunk name.  The plugin is only added when differential loading is enabled as this is the only time that a chunk currently requires its filename to be adjusted.

Closes #15915

(cherry picked from commit d8438f7)

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

@@ -15,10 +15,12 @@ import * as path from 'path';
 import { RollupOptions } from 'rollup';
 import { ScriptTarget } from 'typescript';
 import {
+  ChunkData,
   Compiler,
   Configuration,
   ContextReplacementPlugin,
   HashedModuleIdsPlugin,
+  Plugin,
   Rule,
   compilation,
   debug,
@@ -57,11 +59,13 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     throw new Error('Cannot locate node_modules directory.');
   }
 
-  // tslint:disable-next-line:no-any
-  const extraPlugins: any[] = [];
+  const extraPlugins: Plugin[] = [];
   const extraRules: Rule[] = [];
   const entryPoints: { [key: string]: string[] } = {};
 
+  // determine hashing format
+  const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');
+
   const targetInFileName = getEsVersionForFileName(
     tsConfig.options.target,
     buildOptions.esVersionInFileName,
@@ -146,6 +150,28 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           // Add zone.js legacy support to the es5 polyfills
           // This is a noop execution-wise if zone-evergreen is not used.
           entryPoints[polyfillsChunkName].push('zone.js/dist/zone-legacy');
+
+          // Since the chunkFileName option schema does not allow the function overload, add a plugin
+          // that changes the name of the ES5 polyfills chunk to not include ES2015.
+          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: ChunkData) => {
+                    const isMap = filename && filename.endsWith('.map');
+
+                    return data.chunk && data.chunk.name === 'polyfills-es5'
+                      ? `polyfills-es5${hashFormat.chunk}.js${isMap ? '.map' : ''}`
+                      : filename;
+                  },
+                );
+              });
+            },
+          });
         }
         if (!buildOptions.aot) {
           if (differentialLoadingMode) {
@@ -183,9 +209,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     );
   }
 
-  // determine hashing format
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');
-
   // process global scripts
   const globalScriptsByBundleName = normalizeExtraEntryPoints(
     buildOptions.scripts,