fix(@angular-devkit/build-angular): remove unneeded JIT reflect metad…

…ata polyfill

Since Angular 8, the CLI has transformed decorator metadata to a form that can be used by the Angular dependency injector without the TDZ limitations of Typescript's decorator metadata emit feature.
As a result, a JIT application compiled with the CLI no longer requires the reflect metadata polyfill that was provided by `core-js`.
This polyfill was also the last remaining usage of the `core-js` package within `@angular-devkit/build-angular` which allows the `core-js` package to also be removed.

Refs: #14473 & angular/angular#37382

BREAKING CHANGE: Reflect metadata polyfill is no longer automatically provided in JIT mode
Reflect metadata support is not required by Angular in JIT applications compiled by the CLI.
Applications built in AOT mode did not and will continue to not provide the polyfill.
For the majority of applications, the reflect metadata polyfill removal should have no effect.
However, if an application uses JIT mode and also uses the previously polyfilled reflect metadata JavaScript APIs, the polyfill will need to be manually added to the application after updating.
To replicate the previous behavior, the `core-js` package should be manually installed and the `import 'core-js/proposals/reflect-metadata';` statement should be added to the application's `polyfills.ts` file.

package.json

@@ -130,7 +130,6 @@
     "cacache": "16.0.2",
     "chokidar": "^3.5.2",
     "copy-webpack-plugin": "10.2.4",
-    "core-js": "3.21.1",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
     "debug": "^4.1.1",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -131,7 +131,6 @@ ts_library(
         "@npm//browserslist",
         "@npm//cacache",
         "@npm//copy-webpack-plugin",
-        "@npm//core-js",
         "@npm//critters",
         "@npm//css-loader",
         "@npm//esbuild",

packages/angular_devkit/build_angular/package.json

@@ -27,7 +27,6 @@
     "browserslist": "^4.9.1",
     "cacache": "16.0.2",
     "copy-webpack-plugin": "10.2.4",
-    "core-js": "3.21.1",
     "critters": "0.0.16",
     "css-loader": "6.7.1",
     "esbuild-wasm": "0.14.27",

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

@@ -123,15 +123,6 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
         entryPoints['polyfills'] = [projectPolyfills];
       }
     }
-
-    if (!buildOptions.aot) {
-      const jitPolyfills = require.resolve('core-js/proposals/reflect-metadata');
-      if (entryPoints['polyfills']) {
-        entryPoints['polyfills'].push(jitPolyfills);
-      } else {
-        entryPoints['polyfills'] = [jitPolyfills];
-      }
-    }
   }
 
   if (allowedCommonJsDependencies) {

packages/angular_devkit/build_webpack/test/angular-app/src/polyfills.ts

@@ -26,28 +26,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation

tests/legacy-cli/e2e/assets/webpack/test-app/app/main.ts

@@ -1,4 +1,3 @@
-import 'core-js/proposals/reflect-metadata';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app.module';
 

tests/legacy-cli/e2e/assets/webpack/test-app/package.json

@@ -11,7 +11,6 @@
     "@angular/platform-server": "^13.1.0-next",
     "@angular/router": "^13.1.0-next",
     "@ngtools/webpack": "0.0.0",
-    "core-js": "^3.10.0",
     "rxjs": "^6.6.7",
     "zone.js": "^0.11.4"
   },

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

@@ -11,22 +11,16 @@ export default async function () {
   await ng('build', '--aot=false', '--configuration=development');
 
   // files were created successfully
-  await expectFileToMatch('dist/test-project/polyfills.js', 'core-js/proposals/reflect-metadata');
   await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
   await expectFileToMatch(
     'dist/test-project/index.html',
     '<script src="polyfills.js" type="module">',
   );
-  const jitPolyfillSize = await getFileSize('dist/test-project/polyfills.js');
 
   await ng('build', '--aot=true', '--configuration=development');
 
   // files were created successfully
   await expectFileToExist('dist/test-project/polyfills.js');
-  await expectFileSizeToBeUnder('dist/test-project/polyfills.js', jitPolyfillSize);
-  await expectToFail(() =>
-    expectFileToMatch('dist/test-project/polyfills.js', 'core-js/proposals/reflect-metadata'),
-  );
   await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
   await expectFileToMatch(
     'dist/test-project/index.html',

tests/legacy-cli/e2e/tests/misc/minimal-config.ts

@@ -1,29 +1,33 @@
 import { writeFile, writeMultipleFiles } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
-
 export default function () {
   // TODO(architect): Figure out what a minimal config is for architect apps.
   return;
 
   return Promise.resolve()
-    .then(() => writeFile('angular.json', JSON.stringify({
-      apps: [{
-        root: 'src',
-        main: 'main.ts',
-        scripts: [
-          '../node_modules/core-js/client/shim.min.js',
-          '../node_modules/zone.js/dist/zone.js'
-        ]
-      }],
-      e2e: { protractor: { config: './protractor.conf.js' } }
-    })))
+    .then(() =>
+      writeFile(
+        'angular.json',
+        JSON.stringify({
+          apps: [
+            {
+              root: 'src',
+              main: 'main.ts',
+              scripts: ['../node_modules/zone.js/dist/zone.js'],
+            },
+          ],
+          e2e: { protractor: { config: './protractor.conf.js' } },
+        }),
+      ),
+    )
     .then(() => ng('e2e', 'test-project-e2e'))
-    .then(() => writeMultipleFiles({
-      './src/script.js': `
+    .then(() =>
+      writeMultipleFiles({
+        './src/script.js': `
         document.querySelector('app-root').innerHTML = '<h1>app works!</h1>';
       `,
-      './e2e/app.e2e-spec.ts': `
+        './e2e/app.e2e-spec.ts': `
         import { browser, element, by } from 'protractor';
 
         describe('minimal project App', function() {
@@ -35,13 +39,16 @@ export default function () {
           });
         });
       `,
-      'angular.json': JSON.stringify({
-        apps: [{
-          root: 'src',
-          scripts: ['./script.js']
-        }],
-        e2e: { protractor: { config: './protractor.conf.js' } }
+        'angular.json': JSON.stringify({
+          apps: [
+            {
+              root: 'src',
+              scripts: ['./script.js'],
+            },
+          ],
+          e2e: { protractor: { config: './protractor.conf.js' } },
+        }),
       }),
-    }))
+    )
     .then(() => ng('e2e', 'test-project-e2e'));
 }