fix(@angular-devkit/build-angular): provide supported browsers to babel

By default the browserslist `configPath` will default to `process.cwd()`. This might return incorrect data in a multi app workspace setup.

https://babeljs.io/docs/en/babel-preset-env#configpath

Author: alan-agius4

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

@@ -243,7 +243,6 @@ export function buildWebpackBrowser(
       const tsConfig = readTsconfig(options.tsConfig, context.workspaceRoot);
       const target = tsConfig.options.target || ScriptTarget.ES5;
       const buildBrowserFeatures = new BuildBrowserFeatures(projectRoot, target);
-
       const isDifferentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded();
 
       if (target > ScriptTarget.ES2015 && isDifferentialLoadingNeeded) {
@@ -471,6 +470,7 @@ export function buildWebpackBrowser(
                   const runtimeOptions = {
                     ...processRuntimeAction,
                     runtimeData: processResults,
+                    supportedBrowsers: buildBrowserFeatures.supportedBrowsers,
                   };
                   processResults.push(
                     await import('../utils/process-bundle').then(m => m.process(runtimeOptions)),

packages/angular_devkit/build_angular/src/utils/build-browser-features.ts

@@ -11,14 +11,14 @@ import { feature, features } from 'caniuse-lite';
 import * as ts from 'typescript';
 
 export class BuildBrowserFeatures {
-  private readonly _supportedBrowsers: string[];
   private readonly _es6TargetOrLater: boolean;
+  readonly supportedBrowsers: string[];
 
   constructor(
     private projectRoot: string,
     private scriptTarget: ts.ScriptTarget,
   ) {
-    this._supportedBrowsers = browserslist(undefined, { path: this.projectRoot });
+    this.supportedBrowsers = browserslist(undefined, { path: this.projectRoot });
     this._es6TargetOrLater = this.scriptTarget > ts.ScriptTarget.ES5;
   }
 
@@ -53,7 +53,7 @@ export class BuildBrowserFeatures {
       'ios_saf 10.3',
     ];
 
-    return this._supportedBrowsers.some(browser => safariBrowsers.includes(browser));
+    return this.supportedBrowsers.some(browser => safariBrowsers.includes(browser));
   }
 
   /**
@@ -71,7 +71,7 @@ export class BuildBrowserFeatures {
 
     const data = feature(features[featureId]);
 
-    return !this._supportedBrowsers
+    return !this.supportedBrowsers
       .some(browser => {
         const [agentId, version] = browser.split(' ');
 

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

@@ -46,6 +46,7 @@ export interface ProcessBundleOptions {
   integrityAlgorithm?: 'sha256' | 'sha384' | 'sha512';
   runtimeData?: ProcessBundleResult[];
   replacements?: [string, string][];
+  supportedBrowsers?: string [] | Record<string, string>;
 }
 
 export interface ProcessBundleResult {
@@ -129,6 +130,8 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
       presets: [[
         require.resolve('@babel/preset-env'),
         {
+          // browserslist-compatible query or object of minimum environment versions to support
+          targets: options.supportedBrowsers,
           // modules aren't needed since the bundles use webpack's custom module loading
           modules: false,
           // 'transform-typeof-symbol' generates slower code