fix(@angular-devkit/build-angular): warn if using unsupported IE9/10 …

…browsers

As of Angular v11, IE9 and IE10 are no longer officially supported.  A warning will now be shown during builds if these browsers are requested in the project's browserslist configuration.

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

@@ -256,6 +256,19 @@ export function buildWebpackBrowser(
         `);
         }
 
+        const hasIE9 = buildBrowserFeatures.supportedBrowsers.includes('ie 9');
+        const hasIE10 = buildBrowserFeatures.supportedBrowsers.includes('ie 10');
+        if (hasIE9 || hasIE10) {
+          const browsers =
+            (hasIE9 ? 'IE 9' + (hasIE10 ? ' & ' : '') : '') + (hasIE10 ? 'IE 10' : '');
+          context.logger.warn(
+            `WARNING: Support was requested for ${browsers} in the project's browserslist configuration. ` +
+              (hasIE9 && hasIE10 ? 'These browsers are' : 'This browser is') +
+              ' no longer officially supported with Angular v11 and higher.' +
+              '\nFor additional information: https://v10.angular.io/guide/deprecations#ie-9-10-and-mobile',
+          );
+        }
+
         return {
           ...(await initialize(options, context, host, differentialLoadingMode, transforms.webpackConfiguration)),
           buildBrowserFeatures,

packages/angular_devkit/build_angular/src/browser/specs/browser-support_spec.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Architect } from '@angular-devkit/architect';
+import { logging } from '@angular-devkit/core';
+import { createArchitect, host } from '../../test-utils';
+
+describe('Browser Builder browser support', () => {
+  const targetSpec = { project: 'app', target: 'build' };
+  let architect: Architect;
+
+  beforeEach(async () => {
+    await host.initialize().toPromise();
+    architect = (await createArchitect(host.root())).architect;
+
+    // target ES5 to disable differential loading which is not needed for the tests
+    host.replaceInFile('tsconfig.json', '"target": "es2015"', '"target": "es5"');
+  });
+  afterEach(async () => host.restore().toPromise());
+
+  it('warns when IE9 is present in browserslist', async () => {
+    host.appendToFile('.browserslistrc', '\nIE 9');
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe((e) => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, undefined, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(true);
+
+    const fullLog = logs.join();
+    expect(fullLog).toContain(
+      "WARNING: Support was requested for IE 9 in the project's browserslist configuration.",
+    );
+    expect(fullLog).toContain('This browser is ');
+
+    await run.stop();
+  });
+
+  it('warns when IE10 is present in browserslist', async () => {
+    host.appendToFile('.browserslistrc', '\nIE 10');
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe((e) => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, undefined, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(true);
+
+    const fullLog = logs.join();
+    expect(fullLog).toContain(
+      "WARNING: Support was requested for IE 10 in the project's browserslist configuration.",
+    );
+    expect(fullLog).toContain('This browser is ');
+
+    await run.stop();
+  });
+
+  it('warns when both IE9 & IE10 are present in browserslist', async () => {
+    host.appendToFile('.browserslistrc', '\nIE 9-10');
+
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe((e) => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(targetSpec, undefined, { logger });
+    const output = await run.result;
+    expect(output.success).toBe(true);
+
+    const fullLog = logs.join();
+    expect(fullLog).toContain(
+      "WARNING: Support was requested for IE 9 & IE 10 in the project's browserslist configuration.",
+    );
+    expect(fullLog).toContain('These browsers are ');
+
+    await run.stop();
+  });
+});