fix(@schematics/angular): split browserslist IE entries and provide better comments

Closes #18032

Author: alan-agius4

packages/schematics/angular/application/files/.browserslistrc.template

@@ -14,5 +14,7 @@ last 2 Edge major versions
 last 2 Safari major version
 last 2 iOS major versions
 Firefox ESR<% if (legacyBrowsers) { %>
-IE 9-11<% } else { %>
-not IE 9-11 # For IE 9-11 support, remove 'not'.<% } %>
+IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11.
+IE 11<% } else { %>
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.<% } %>

packages/schematics/angular/application/index_spec.ts

@@ -445,15 +445,19 @@ describe('Application Schematic', () => {
     const tree = await schematicRunner.runSchematicAsync('application', options, workspaceTree)
       .toPromise();
     const content = tree.readContent('/projects/foo/.browserslistrc');
-    expect(content).not.toContain(`not IE 9-11 # For IE 9-11 support, remove 'not'.`);
-    expect(content).toContain('IE 9-11');
+    expect(content).not.toContain('not IE 11');
+    expect(content).toContain('IE 11');
+
+    expect(content).not.toContain('not IE 9-10');
+    expect(content).toContain('IE 9-10');
   });
 
   it(`should not add support for IE 9-11 in '.browserslistrc' when 'legacyBrowsers' is false`, async () => {
     const options: ApplicationOptions = { ...defaultOptions, legacyBrowsers: false };
     const tree = await schematicRunner.runSchematicAsync('application', options, workspaceTree)
       .toPromise();
     const content = tree.readContent('/projects/foo/.browserslistrc');
-    expect(content).toContain(`not IE 9-11 # For IE 9-11 support, remove 'not'.`);
+    expect(content).toContain('not IE 11');
+    expect(content).toContain('not IE 9-10');
   });
 });

tests/legacy-cli/e2e/tests/build/differential-cache.ts

@@ -47,8 +47,8 @@ export default async function() {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   // Remove the cache so that an initial build and build with cache can be tested

tests/legacy-cli/e2e/tests/build/differential-loading.ts

@@ -8,8 +8,8 @@ export default async function () {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   await writeMultipleFiles({

tests/legacy-cli/e2e/tests/build/polyfills.ts

@@ -13,8 +13,8 @@ export default async function () {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   await ng('build', '--aot=false');

tests/legacy-cli/e2e/tests/build/prod-build.ts

@@ -39,8 +39,8 @@ export default async function () {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   await ng('build', '--prod');

tests/legacy-cli/e2e/tests/build/sourcemap.ts

@@ -6,8 +6,8 @@ export default async function () {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   // The below is needed to cache bundles and verify that sourcemaps are generated

tests/legacy-cli/e2e/tests/build/worker.ts

@@ -19,8 +19,8 @@ export default async function () {
   // Enable Differential loading to run both size checks
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   await ng('generate', 'web-worker', 'app');

tests/legacy-cli/e2e/tests/i18n/ivy-localize-dl-xliff2.ts

@@ -16,8 +16,8 @@ export async function executeTest() {
   // Ensure a DL build is used.
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   await updateJsonFile('tsconfig.base.json', config => {

tests/legacy-cli/e2e/tests/misc/browsers.ts

@@ -17,8 +17,8 @@ export default async function () {
 
   await replaceInFile(
     '.browserslistrc',
-    'not IE 9-11',
-    'IE 9-11',
+    'not IE 11',
+    'IE 11',
   );
 
   if (!getGlobalVariable('argv')['ve']) {