feat(@angular/build): expand browser support policy to widely available Baseline

This commit includes a Baseline widely-available date which is hard-coded in `buid_vars.bzl` and used to generate a `.browserslistrc` file at build-time.

Using a browser outside of Angular's minimum defined browser set is still allowed as we expect that _most_ of the time this will work just fine. However, we log a warning to be clear to users that they are outside Angular's supported browserset.

I've currently pinned Angular to the March 31st baseline, but this will likely be updated again as we get closer to the v20 release.

The current set of browsers generated are:

```
Chrome >= 107
ChromeAndroid >= 107
Edge >= 107
Firefox >= 104
FirefoxAndroid >= 104
Safari >= 16
iOS >= 16
```

Author: dgp1130

constants.bzl

@@ -8,6 +8,13 @@ ANGULAR_FW_VERSION = "^20.0.0-next.0"
 ANGULAR_FW_PEER_DEP = "^20.0.0 || ^20.0.0-next.0"
 NG_PACKAGR_PEER_DEP = "^20.0.0 || ^20.0.0-next.0"
 
+# Baseline widely-available date in `YYYY-MM-DD` format which defines Angular's
+# browser support. This date serves as the source of truth for the Angular CLI's
+# default browser set used to determine what downleveling is necessary.
+#
+# See: https://web.dev/baseline
+BASELINE_DATE = "2025-03-31"
+
 SNAPSHOT_REPOS = {
     "@angular/cli": "angular/cli-builds",
     "@angular/pwa": "angular/angular-pwa-builds",

modules/testing/builder/projects/hello-world-app/.browserslistrc

@@ -1,7 +1,9 @@
 load("@devinfra//bazel/api-golden:index_rjs.bzl", "api_golden_test_npm_package")
 load("@npm2//:defs.bzl", "npm_link_all_packages")
+load("//:constants.bzl", "BASELINE_DATE")
 load("//tools:defaults.bzl", "copy_to_bin", "jasmine_test", "npm_package", "ts_project")
 load("//tools:ts_json_schema.bzl", "ts_json_schema")
+load("//tools/baseline_browserslist:baseline_browserslist.bzl", "baseline_browserslist")
 
 licenses(["notice"])
 
@@ -39,6 +41,12 @@ copy_to_bin(
     srcs = glob(["**/schema.json"]),
 )
 
+baseline_browserslist(
+    name = "angular_browserslist",
+    out = ".browserslistrc",
+    baseline = BASELINE_DATE,
+)
+
 RUNTIME_ASSETS = glob(
     include = [
         "src/**/schema.json",
@@ -49,6 +57,7 @@ RUNTIME_ASSETS = glob(
 ) + [
     "builders.json",
     "package.json",
+    ":angular_browserslist",
 ]
 
 ts_project(

packages/angular/build/BUILD.bazel

@@ -84,12 +84,12 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
     });
 
     it('warns when IE is present in browserslist', async () => {
-      await harness.appendToFile(
+      await harness.writeFile(
         '.browserslistrc',
         `
-           IE 9
-           IE 11
-         `,
+          IE 9
+          IE 11
+        `,
       );
 
       harness.useTarget('build', {
@@ -102,10 +102,30 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       expect(logs).toContain(
         jasmine.objectContaining({
           level: 'warn',
-          message:
-            `One or more browsers which are configured in the project's Browserslist ` +
-            'configuration will be ignored as ES5 output is not supported by the Angular CLI.\n' +
-            'Ignored browsers: ie 11, ie 9',
+          message: jasmine.stringContaining('ES5 output is not supported'),
+        }),
+      );
+
+      // Don't duplicate the error.
+      expect(logs).not.toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringContaining("fall outside Angular's browser support"),
+        }),
+      );
+    });
+
+    it("warns when targeting a browser outside Angular's minimum support", async () => {
+      await harness.writeFile('.browserslistrc', 'Chrome >= 100');
+
+      harness.useTarget('build', BASE_OPTIONS);
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          level: 'warn',
+          message: jasmine.stringContaining("fall outside Angular's browser support"),
         }),
       );
     });

packages/angular/build/src/builders/application/tests/behavior/browser-support_spec.ts

@@ -12,35 +12,49 @@ export function getSupportedBrowsers(
   projectRoot: string,
   logger: { warn(message: string): void },
 ): string[] {
-  browserslist.defaults = [
-    'last 2 Chrome versions',
-    'last 1 Firefox version',
-    'last 2 Edge major versions',
-    'last 2 Safari major versions',
-    'last 2 iOS major versions',
-    'last 2 Android major versions',
-    'Firefox ESR',
-  ];
+  // Read the browserslist configuration containing Angular's browser support policy.
+  const angularBrowserslist = browserslist(undefined, {
+    path: require.resolve('../../.browserslistrc'),
+  });
+
+  // Use Angular's configuration as the default.
+  browserslist.defaults = angularBrowserslist;
+
+  // Get the minimum set of browser versions supported by Angular.
+  const minimumBrowsers = new Set(angularBrowserslist);
 
   // Get browsers from config or default.
   const browsersFromConfigOrDefault = new Set(browserslist(undefined, { path: projectRoot }));
 
   // Get browsers that support ES6 modules.
   const browsersThatSupportEs6 = new Set(browserslist('supports es6-module'));
 
+  const nonEs6Browsers: string[] = [];
   const unsupportedBrowsers: string[] = [];
   for (const browser of browsersFromConfigOrDefault) {
     if (!browsersThatSupportEs6.has(browser)) {
+      // Any browser which does not support ES6 is explicitly ignored, as Angular will not build successfully.
       browsersFromConfigOrDefault.delete(browser);
+      nonEs6Browsers.push(browser);
+    } else if (!minimumBrowsers.has(browser)) {
+      // Any other unsupported browser we will attempt to use, but provide no support for.
       unsupportedBrowsers.push(browser);
     }
   }
 
-  if (unsupportedBrowsers.length) {
+  if (nonEs6Browsers.length) {
     logger.warn(
       `One or more browsers which are configured in the project's Browserslist configuration ` +
         'will be ignored as ES5 output is not supported by the Angular CLI.\n' +
-        `Ignored browsers: ${unsupportedBrowsers.join(', ')}`,
+        `Ignored browsers:\n${nonEs6Browsers.join(', ')}`,
+    );
+  }
+
+  if (unsupportedBrowsers.length) {
+    logger.warn(
+      `One or more browsers which are configured in the project's Browserslist configuration ` +
+        "fall outside Angular's browser support for this version.\n" +
+        `Unsupported browsers:\n${unsupportedBrowsers.join(', ')}`,
     );
   }
 

packages/angular/build/src/utils/supported-browsers.ts

@@ -65,12 +65,12 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
     });
 
     it('warns when IE is present in browserslist', async () => {
-      await harness.appendToFile(
+      await harness.writeFile(
         '.browserslistrc',
         `
-           IE 9
-           IE 11
-         `,
+          IE 9
+          IE 11
+        `,
       );
 
       harness.useTarget('build', {
@@ -83,10 +83,30 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       expect(logs).toContain(
         jasmine.objectContaining({
           level: 'warn',
-          message:
-            `One or more browsers which are configured in the project's Browserslist ` +
-            'configuration will be ignored as ES5 output is not supported by the Angular CLI.\n' +
-            'Ignored browsers: ie 11, ie 9',
+          message: jasmine.stringContaining('ES5 output is not supported'),
+        }),
+      );
+
+      // Don't duplicate the error.
+      expect(logs).not.toContain(
+        jasmine.objectContaining({
+          message: jasmine.stringContaining("fall outside Angular's browser support"),
+        }),
+      );
+    });
+
+    it("warns when targeting a browser outside Angular's minimum support", async () => {
+      await harness.writeFile('.browserslistrc', 'Chrome >= 100');
+
+      harness.useTarget('build', BASE_OPTIONS);
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          level: 'warn',
+          message: jasmine.stringContaining("fall outside Angular's browser support"),
         }),
       );
     });