Conditional JIT Polyfills

packages/angular_devkit/build_angular/src/angular-cli-files/models/jit-polyfills.js

@@ -0,0 +1,8 @@
+/**
+ * @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 'core-js/es7/reflect';

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -62,6 +62,13 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     entryPoints['polyfills'] = [path.resolve(root, buildOptions.polyfills)];
   }
 
+  if (!buildOptions.aot) {
+    entryPoints['polyfills'] = [
+      ...(entryPoints['polyfills'] || []),
+      path.join(__dirname, '..', 'jit-polyfills.js'),
+    ];
+  }
+
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing as any);
 

packages/schematics/angular/application/files/src/polyfills.ts

@@ -40,12 +40,6 @@
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
-
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.

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

@@ -1,18 +1,32 @@
-import { expectFileToMatch } from '../../utils/fs';
-import { ng } from '../../utils/process';
 import { oneLineTrim } from 'common-tags';
+import {
+  expectFileSizeToBeUnder,
+  expectFileToExist,
+  expectFileToMatch,
+  getFileSize,
+} from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { expectToFail } from '../../utils/utils';
 
-export default function () {
-  // TODO(architect): Delete this test. It is now in devkit/build-angular.
+export default async function () {
+    await ng('build');
+    // files were created successfully
+    await expectFileToMatch('dist/test-project/polyfills.js', 'core-js/es7/reflect');
+    await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
+    expectFileToMatch('dist/test-project/index.html', oneLineTrim`
+      <script type="text/javascript" src="runtime.js"></script>
+      <script type="text/javascript" src="polyfills.js"></script>
+    `);
+    const jitPolyfillSize = await getFileSize('dist/test-project/polyfills.js');
 
-  return Promise.resolve()
-    .then(() => ng('build'))
+    await ng('build', '--aot');
     // files were created successfully
-    .then(() => expectFileToMatch('dist/test-project/polyfills.js', 'core-js'))
-    .then(() => expectFileToMatch('dist/test-project/polyfills.js', 'zone.js'))
-    // index.html lists the right bundles
-    .then(() => expectFileToMatch('dist/test-project/index.html', oneLineTrim`
+    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/es7/reflect'));
+    await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
+    expectFileToMatch('dist/test-project/index.html', oneLineTrim`
       <script type="text/javascript" src="runtime.js"></script>
       <script type="text/javascript" src="polyfills.js"></script>
-    `));
+    `);
 }

tests/legacy-cli/e2e/utils/fs.ts

@@ -192,11 +192,16 @@ export function expectFileToMatch(fileName: string, regEx: RegExp | string) {
     });
 }
 
-export function expectFileSizeToBeUnder(fileName: string, sizeInBytes: number) {
-  return readFile(fileName)
-    .then(content => {
-      if (content.length > sizeInBytes) {
-        throw new Error(`File "${fileName}" exceeded file size of "${sizeInBytes}".`);
-      }
-    });
+export async function getFileSize(fileName: string) {
+  const stats = await fs.stat(fileName);
+
+  return stats.size;
+}
+
+export async function expectFileSizeToBeUnder(fileName: string, sizeInBytes: number) {
+  const fileSize = await getFileSize(fileName);
+
+  if (fileSize > sizeInBytes) {
+    throw new Error(`File "${fileName}" exceeded file size of "${sizeInBytes}".`);
+  }
 }