From e91b3d2e3b84964365e5ccfe7b5418ad75fa3356 Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 11 Feb 2020 11:05:35 -0500
Subject: [PATCH] fix(@angular-devkit/build-angular): generate correct
 filenames when targeting ESNext

Fixes: #16906
(cherry picked from commit 60918794287542b4f5aabfdf195089ea8d357f37)
---
 .../models/webpack-configs/utils.ts           | 12 ++++--
 .../build_angular/src/browser/index.ts        |  4 +-
 .../build_angular/src/utils/action-cache.ts   |  4 +-
 .../build_angular/src/utils/process-bundle.ts |  6 +--
 .../differential_loading_spec_large.ts        | 42 +++++++++++++++++++
 5 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts
index 15ce3467e19d..dc78f2fd8f13 100644
--- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/utils.ts
+++ b/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) {
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
index 7f8096c596c4..7ef41ed0adf7 100644
--- a/packages/angular_devkit/build_angular/src/browser/index.ts
+++ b/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 });
               }
 
diff --git a/packages/angular_devkit/build_angular/src/utils/action-cache.ts b/packages/angular_devkit/build_angular/src/utils/action-cache.ts
index 6ba2bae136ce..eb99cd4579a4 100644
--- a/packages/angular_devkit/build_angular/src/utils/action-cache.ts
+++ b/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,
         };
 
diff --git a/packages/angular_devkit/build_angular/src/utils/process-bundle.ts b/packages/angular_devkit/build_angular/src/utils/process-bundle.ts
index c1f9d9149818..e6b34f90d6bb 100644
--- a/packages/angular_devkit/build_angular/src/utils/process-bundle.ts
+++ b/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,
     }),
   };
diff --git a/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts
index 6ccb8055c2ab..dc318ccc2b75 100644
--- a/packages/angular_devkit/build_angular/test/browser/differential_loading_spec_large.ts
+++ b/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 });