fix(@angular-devkit/build-angular): display correct filename for bundles that are ES2016+

Author: alan-agius4

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

@@ -37,9 +37,8 @@ export enum ThresholdSeverity {
 }
 
 enum DifferentialBuildType {
-  // FIXME: this should match the actual file suffix and not hardcoded.
-  ORIGINAL = 'es2015',
-  DOWNLEVEL = 'es5',
+  ORIGINAL = 'original',
+  DOWNLEVEL = 'downlevel',
 }
 
 export function* calculateThresholds(budget: Budget): IterableIterator<Threshold> {
@@ -214,15 +213,17 @@ class BundleCalculator extends Calculator {
       return [];
     }
 
+    const buildTypeLabels = getBuildTypeLabels(this.processResults);
+
     // The chunk may or may not have differential builds. Compute the size for
     // each then check afterwards if they are all the same.
     const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
       const size = this.chunks
-          .filter(chunk => chunk.names.indexOf(budgetName) !== -1)
-          .map(chunk => this.calculateChunkSize(chunk, buildType))
-          .reduce((l, r) => l + r, 0);
+        .filter(chunk => chunk.names.includes(budgetName))
+        .map(chunk => this.calculateChunkSize(chunk, buildType))
+        .reduce((l, r) => l + r, 0);
 
-      return {size, label: `bundle ${this.budget.name}-${buildType}`};
+      return { size, label: `bundle ${this.budget.name}-${buildTypeLabels[buildType]}` };
     });
 
     // If this bundle was not actually generated by a differential build, then
@@ -240,13 +241,14 @@ class BundleCalculator extends Calculator {
  */
 class InitialCalculator extends Calculator {
   calculate() {
+    const buildTypeLabels = getBuildTypeLabels(this.processResults);
     const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
       return {
-        label: `bundle initial-${buildType}`,
+        label: `bundle initial-${buildTypeLabels[buildType]}`,
         size: this.chunks
-            .filter(chunk => chunk.initial)
-            .map(chunk => this.calculateChunkSize(chunk, buildType))
-            .reduce((l, r) => l + r, 0),
+          .filter(chunk => chunk.initial)
+          .map(chunk => this.calculateChunkSize(chunk, buildType))
+          .reduce((l, r) => l + r, 0),
       };
     });
 
@@ -440,3 +442,19 @@ function mergeDifferentialBuildSizes(buildSizes: Size[], mergeLabel: string): Si
 function allEquivalent<T>(items: Iterable<T>): boolean {
   return new Set(items).size < 2;
 }
+
+function getBuildTypeLabels(processResults: ProcessBundleResult[]): Record<DifferentialBuildType, string> {
+  const fileNameSuffixRegExp = /\-(es20\d{2}|esnext)\./;
+  const originalFileName = processResults
+    .find(({ original }) => original?.filename && fileNameSuffixRegExp.test(original.filename))?.original?.filename;
+
+  let originalSuffix: string | undefined;
+  if (originalFileName) {
+    originalSuffix = fileNameSuffixRegExp.exec(originalFileName)?.[1];
+  }
+
+  return {
+    [DifferentialBuildType.DOWNLEVEL]: 'es5',
+    [DifferentialBuildType.ORIGINAL]: originalSuffix || 'es2015',
+  };
+}

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

@@ -243,7 +243,7 @@ describe('bundle-calculator', () => {
           name: '0',
           // Individual builds are under budget, but combined they are over.
           original: {
-            filename: 'initial-es2015.js',
+            filename: 'initial-es2017.js',
             size: 1.25 * KB,
           },
           downlevel: {
@@ -258,7 +258,7 @@ describe('bundle-calculator', () => {
       expect(failures.length).toBe(2);
       expect(failures).toContain({
         severity: ThresholdSeverity.Error,
-        message: jasmine.stringMatching('bundle initial-es2015 exceeded maximum budget.'),
+        message: jasmine.stringMatching('bundle initial-es2017 exceeded maximum budget.'),
       });
       expect(failures).toContain({
         severity: ThresholdSeverity.Error,