fix(@angular-devkit/build-angular): downlevelled libraries based on the browserlist configurations

There is no standard for library authors to ship their library in different ES versions, which can result in vendor libraries to ship ES features which are not supported by one or more browsers that the user's application supports.

With this change, we will be downlevelling libraries based on the list of supported browsers which is configured in the browserslist configuration. Previously, we only downlevelled libraries when targetting ES 5.

The TypeScript target option will not effect how the libraries get downlevelled.

Closes angular#23126

Author: alan-agius4

packages/angular_devkit/build_angular/src/babel/presets/application.ts

@@ -47,7 +47,7 @@ export interface ApplicationPresetOptions {
     linkerPluginCreator: typeof import('@angular/compiler-cli/linker/babel').createEs2015LinkerPlugin;
   };
 
-  forceES5?: boolean;
+  forcePresetEnv?: boolean;
   forceAsyncTransformation?: boolean;
   instrumentCode?: {
     includedBasePath: string;
@@ -59,6 +59,7 @@ export interface ApplicationPresetOptions {
     wrapDecorators: boolean;
   };
 
+  supportedBrowsers?: string[];
   diagnosticReporter?: DiagnosticReporter;
 }
 
@@ -178,14 +179,13 @@ export default function (api: unknown, options: ApplicationPresetOptions) {
     );
   }
 
-  if (options.forceES5) {
+  if (options.forcePresetEnv) {
     presets.push([
       require('@babel/preset-env').default,
       {
         bugfixes: true,
         modules: false,
-        // Comparable behavior to tsconfig target of ES5
-        targets: { ie: 9 },
+        targets: options.supportedBrowsers,
         exclude: ['transform-typeof-symbol'],
       },
     ]);

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -72,18 +72,26 @@ export default custom<ApplicationPresetOptions>(() => {
 
   return {
     async customOptions(options, { source, map }) {
-      const { i18n, scriptTarget, aot, optimize, instrumentCode, ...rawOptions } =
-        options as AngularBabelLoaderOptions;
+      const {
+        i18n,
+        scriptTarget,
+        aot,
+        optimize,
+        instrumentCode,
+        supportedBrowsers,
+        ...rawOptions
+      } = options as AngularBabelLoaderOptions;
 
       // Must process file if plugins are added
       let shouldProcess = Array.isArray(rawOptions.plugins) && rawOptions.plugins.length > 0;
 
       const customOptions: ApplicationPresetOptions = {
         forceAsyncTransformation: false,
-        forceES5: false,
+        forcePresetEnv: false,
         angularLinker: undefined,
         i18n: undefined,
         instrumentCode: undefined,
+        supportedBrowsers,
       };
 
       // Analyze file for linking
@@ -105,20 +113,25 @@ export default custom<ApplicationPresetOptions>(() => {
         shouldProcess = true;
       }
 
-      // Analyze for ES target processing
-      const esTarget = scriptTarget as ScriptTarget | undefined;
-      if (esTarget !== undefined) {
-        if (esTarget < ScriptTarget.ES2015) {
-          customOptions.forceES5 = true;
-        } else if (esTarget >= ScriptTarget.ES2017 || /\.[cm]?js$/.test(this.resourcePath)) {
+      if (/\.[cm]?js$/.test(this.resourcePath)) {
+        // Applications code ES version can be controlled using TypeScript's `target` option.
+        // However, this doesn't effect libraries and hence we use preset-env to downlevel ES fetaures
+        // based on the supported browsers in browserlist.
+        customOptions.forcePresetEnv = true;
+
+        // Analyze for ES target processing
+        const esTarget = scriptTarget as ScriptTarget | undefined;
+
+        if (esTarget !== undefined && esTarget >= ScriptTarget.ES2017) {
           // Application code (TS files) will only contain native async if target is ES2017+.
           // However, third-party libraries can regardless of the target option.
           // APF packages with code in [f]esm2015 directories is downlevelled to ES2015 and
           // will not have native async.
           customOptions.forceAsyncTransformation =
             !/[\\/][_f]?esm2015[\\/]/.test(this.resourcePath) && source.includes('async');
         }
-        shouldProcess ||= customOptions.forceAsyncTransformation || customOptions.forceES5 || false;
+
+        shouldProcess = true;
       }
 
       // Analyze for i18n inlining

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

@@ -378,6 +378,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
                 scriptTarget,
                 aot: buildOptions.aot,
                 optimize: buildOptions.buildOptimizer,
+                supportedBrowsers: buildOptions.supportedBrowsers,
                 instrumentCode: codeCoverage
                   ? {
                       includedBasePath: sourceRoot,