From bb7ae70ed6efc10f92a5f1864083d01f91ad8565 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Thu, 20 Sep 2018 19:54:19 -0400 Subject: [PATCH 1/3] feat(@angular-devkit/build-angular): automatically include reflect metadata polyfill for JIT The reflect metadata polyfill is only required by Angular when using JIT. Since it is unanticipated it would be needed when using AOT, including it when using AOT only serves to unnecessarily increase application file sizes. JIT is not recommended for production use. However, if an application uses JIT in production and an alternate reflect metadata polyfill is preferred (core-js/es7/reflect is currently used), then TypeScript path mapping can be used to override the polyfill. As an example, the following will allow the usage of the `reflect-metadata` package in lieu of the default: ``` "paths": { "core-js/es7/reflect": ["node_modules/reflect-metadata"] } ``` --- .../src/angular-cli-files/models/jit-polyfills.js | 8 ++++++++ .../angular-cli-files/models/webpack-configs/common.ts | 7 +++++++ 2 files changed, 15 insertions(+) create mode 100644 packages/angular_devkit/build_angular/src/angular-cli-files/models/jit-polyfills.js diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/jit-polyfills.js b/packages/angular_devkit/build_angular/src/angular-cli-files/models/jit-polyfills.js new file mode 100644 index 000000000000..624a54706810 --- /dev/null +++ b/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'; diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts index b7901ceab9df..3a59950deb0c 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts +++ b/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); From 4a1c29e2e82546fa516dd30452ac5981aac0b2c4 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Thu, 20 Sep 2018 19:55:18 -0400 Subject: [PATCH 2/3] fix(@schematics/angular): remove redundant reflect polyfill --- .../schematics/angular/application/files/src/polyfills.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/schematics/angular/application/files/src/polyfills.ts b/packages/schematics/angular/application/files/src/polyfills.ts index 8fceb45d3b0a..074b89d38e40 100644 --- a/packages/schematics/angular/application/files/src/polyfills.ts +++ b/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. From f92419774335f0bc8f0a957e3ab9fbcf1812d792 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Fri, 21 Sep 2018 17:11:47 -0400 Subject: [PATCH 3/3] test: update E2E polyfills test for JIT mode --- tests/legacy-cli/e2e/tests/build/polyfills.ts | 36 +++++++++++++------ tests/legacy-cli/e2e/utils/fs.ts | 19 ++++++---- 2 files changed, 37 insertions(+), 18 deletions(-) diff --git a/tests/legacy-cli/e2e/tests/build/polyfills.ts b/tests/legacy-cli/e2e/tests/build/polyfills.ts index d480169480e3..cc0e147afd4e 100644 --- a/tests/legacy-cli/e2e/tests/build/polyfills.ts +++ b/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` + + + `); + 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` - `)); + `); } diff --git a/tests/legacy-cli/e2e/utils/fs.ts b/tests/legacy-cli/e2e/utils/fs.ts index 2f2a0cdaae77..4beb03021e1f 100644 --- a/tests/legacy-cli/e2e/utils/fs.ts +++ b/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}".`); + } }