fix(@angular-devkit/build-angular): generate correct filenames when targeting ESNext

Fixes: #16906

Author: clydin

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

@@ -110,9 +110,15 @@ export function getEsVersionForFileName(
   scriptTargetOverride: ScriptTarget | undefined,
   esVersionInFileName = false,
 ): string {
-  return scriptTargetOverride && esVersionInFileName
-    ? '-' + ScriptTarget[scriptTargetOverride].toLowerCase()
-    : '';
+  if (!esVersionInFileName || scriptTargetOverride === undefined) {
+    return '';
+  }
+
+  if (scriptTargetOverride === ScriptTarget.ESNext) {
+    return '-esnext';
+  }
+
+  return '-' + ScriptTarget[scriptTargetOverride].toLowerCase();
 }
 
 export function isPolyfillsEntry(name: string) {

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -352,7 +352,7 @@ export function buildWebpackBrowser(
                     }
                     workerReplacements.push([
                       file.file,
-                      file.file.replace(/\-es20\d{2}/, '-es5'),
+                      file.file.replace(/\-(es20\d{2}|esnext)/, '-es5'),
                     ]);
                   } else {
                     continue;
@@ -433,7 +433,7 @@ export function buildWebpackBrowser(
                 // Add the newly created ES5 bundles to the index as nomodule scripts
                 const newFilename = es5Polyfills
                   ? file.file.replace(/\-es20\d{2}/, '')
-                  : file.file.replace(/\-es20\d{2}/, '-es5');
+                  : file.file.replace(/\-(es20\d{2}|esnext)/, '-es5');
                 noModuleFiles.push({ ...file, file: newFilename });
               }
 

packages/angular_devkit/build_angular/src/utils/action-cache.ts

@@ -154,7 +154,7 @@ export class BundleActionCache {
     cacheEntry = entries[CacheKey.DownlevelCode];
     if (cacheEntry) {
       result.downlevel = {
-        filename: action.filename.replace(/\-es20\d{2}/, '-es5'),
+        filename: action.filename.replace(/\-(es20\d{2}|esnext)/, '-es5'),
         size: cacheEntry.size,
         integrity: cacheEntry.integrity,
       };
@@ -164,7 +164,7 @@ export class BundleActionCache {
       cacheEntry = entries[CacheKey.DownlevelMap];
       if (cacheEntry) {
         result.downlevel.map = {
-          filename: action.filename.replace(/\-es20\d{2}/, '-es5') + '.map',
+          filename: action.filename.replace(/\-(es20\d{2}|esnext)/, '-es5') + '.map',
           size: cacheEntry.size,
         };
 

packages/angular_devkit/build_angular/src/utils/process-bundle.ts

@@ -110,7 +110,7 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
 
   const basePath = path.dirname(options.filename);
   const filename = path.basename(options.filename);
-  const downlevelFilename = filename.replace(/\-es20\d{2}/, '-es5');
+  const downlevelFilename = filename.replace(/\-(es20\d{2}|esnext)/, '-es5');
   const downlevel = !options.optimizeOnly;
   const sourceCode = options.code;
   const sourceMap = options.map ? JSON.parse(options.map) : undefined;
@@ -440,7 +440,7 @@ async function processRuntime(
 
   // Adjust lazy loaded scripts to point to the proper variant
   // Extra spacing is intentional to align source line positions
-  downlevelCode = downlevelCode.replace(/"\-es20\d{2}\./, '   "-es5.');
+  downlevelCode = downlevelCode.replace(/"\-(es20\d{2}|esnext)\./, '   "-es5.');
 
   return {
     original: await processBundle({
@@ -451,7 +451,7 @@ async function processRuntime(
     downlevel: await processBundle({
       ...options,
       code: downlevelCode,
-      filename: options.filename.replace(/\-es20\d{2}/, '-es5'),
+      filename: options.filename.replace(/\-(es20\d{2}|esnext)/, '-es5'),
       isOriginal: false,
     }),
   };

packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts

@@ -104,6 +104,48 @@ describe('Browser Builder with differential loading', () => {
     expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
   });
 
+  it('emits all the neccessary files for target of ESNext', async () => {
+    host.replaceInFile(
+      'tsconfig.json',
+      '"target": "es2015",',
+      `"target": "esnext",`,
+    );
+
+    const { files } = await browserBuild(architect, host, target);
+
+    const expectedOutputs = [
+      'favicon.ico',
+      'index.html',
+
+      'main-esnext.js',
+      'main-esnext.js.map',
+      'main-es5.js',
+      'main-es5.js.map',
+
+      'polyfills-esnext.js',
+      'polyfills-esnext.js.map',
+      'polyfills-es5.js',
+      'polyfills-es5.js.map',
+
+      'runtime-esnext.js',
+      'runtime-esnext.js.map',
+      'runtime-es5.js',
+      'runtime-es5.js.map',
+
+      'styles-esnext.js',
+      'styles-esnext.js.map',
+      'styles-es5.js',
+      'styles-es5.js.map',
+
+      'vendor-esnext.js',
+      'vendor-esnext.js.map',
+      'vendor-es5.js',
+      'vendor-es5.js.map',
+    ] as PathFragment[];
+
+    expect(Object.keys(files)).toEqual(jasmine.arrayWithExactContents(expectedOutputs));
+  });
+
   it('deactivates differential loading for watch mode', async () => {
     const { files } = await browserBuild(architect, host, target, { watch: true });