From 69426a6810506d0d67bc35a4a947dbbc2894a8cd Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Sat, 31 Dec 2016 22:37:50 +0000 Subject: [PATCH] fix(polyfills): move polyfills to scripts array Polyfills found in polyfills.ts would not be available for scripts due to being loaded in the main bundle only. Fix #2752 Fix #3309 --- .../blueprints/ng2/files/__path__/main.ts | 2 -- .../blueprints/ng2/files/__path__/test.ts | 2 -- .../blueprints/ng2/files/angular-cli.json | 1 + packages/angular-cli/lib/config/schema.json | 3 +++ .../angular-cli/models/webpack-build-common.ts | 8 +++++++- packages/angular-cli/models/webpack-config.ts | 2 +- packages/angular-cli/plugins/karma.js | 13 +++++++++++++ tests/e2e/tests/build/polyfills.ts | 18 ++++++++++++++++++ tests/e2e/tests/build/scripts-array.ts | 5 +++-- tests/e2e/tests/build/styles/styles-array.ts | 8 ++++++-- tests/e2e/tests/test/test-scripts.ts | 4 ++-- tests/e2e/tests/third-party/bootstrap.ts | 1 + 12 files changed, 55 insertions(+), 12 deletions(-) create mode 100644 tests/e2e/tests/build/polyfills.ts diff --git a/packages/angular-cli/blueprints/ng2/files/__path__/main.ts b/packages/angular-cli/blueprints/ng2/files/__path__/main.ts index ac78a713c2d1..46c1c73e209e 100644 --- a/packages/angular-cli/blueprints/ng2/files/__path__/main.ts +++ b/packages/angular-cli/blueprints/ng2/files/__path__/main.ts @@ -1,5 +1,3 @@ -import './polyfills.ts'; - import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { enableProdMode } from '@angular/core'; import { environment } from './environments/environment'; diff --git a/packages/angular-cli/blueprints/ng2/files/__path__/test.ts b/packages/angular-cli/blueprints/ng2/files/__path__/test.ts index 430d4df98fa0..9bf72267e9b1 100644 --- a/packages/angular-cli/blueprints/ng2/files/__path__/test.ts +++ b/packages/angular-cli/blueprints/ng2/files/__path__/test.ts @@ -1,7 +1,5 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import './polyfills.ts'; - import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/proxy.js'; import 'zone.js/dist/sync-test'; diff --git a/packages/angular-cli/blueprints/ng2/files/angular-cli.json b/packages/angular-cli/blueprints/ng2/files/angular-cli.json index 67e6dbeea657..ea2430a59c53 100644 --- a/packages/angular-cli/blueprints/ng2/files/angular-cli.json +++ b/packages/angular-cli/blueprints/ng2/files/angular-cli.json @@ -13,6 +13,7 @@ ], "index": "index.html", "main": "main.ts", + "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "<%= prefix %>", diff --git a/packages/angular-cli/lib/config/schema.json b/packages/angular-cli/lib/config/schema.json index 6f23d6c4e219..11513cedebb1 100644 --- a/packages/angular-cli/lib/config/schema.json +++ b/packages/angular-cli/lib/config/schema.json @@ -55,6 +55,9 @@ "main": { "type": "string" }, + "polyfills": { + "type": "string" + }, "test": { "type": "string" }, diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts index 7d6b857bb187..29ce4a3f821e 100644 --- a/packages/angular-cli/models/webpack-build-common.ts +++ b/packages/angular-cli/models/webpack-build-common.ts @@ -52,6 +52,10 @@ export function getWebpackCommonConfig( entryPoints['main'] = [path.resolve(appRoot, appConfig.main)]; } + if (appConfig.polyfills) { + entryPoints['polyfills'] = [path.resolve(appRoot, appConfig.polyfills)]; + } + // determine hashing format const hashFormat = getOutputHashFormat(outputHashing); @@ -143,7 +147,9 @@ export function getWebpackCommonConfig( new HtmlWebpackPlugin({ template: path.resolve(appRoot, appConfig.index), filename: path.resolve(appConfig.outDir, appConfig.index), - chunksSortMode: packageChunkSort(['inline', 'styles', 'scripts', 'vendor', 'main']), + chunksSortMode: packageChunkSort([ + 'inline', 'polyfills', 'styles', 'scripts', 'vendor', 'main' + ]), excludeChunks: lazyChunks, xhtml: true }), diff --git a/packages/angular-cli/models/webpack-config.ts b/packages/angular-cli/models/webpack-config.ts index 893979274986..c8e359d58221 100644 --- a/packages/angular-cli/models/webpack-config.ts +++ b/packages/angular-cli/models/webpack-config.ts @@ -69,7 +69,7 @@ export class NgCliWebpackConfig { let config = webpackMerge(baseConfig, targetConfigPartial); - if (appConfig.main) { + if (appConfig.main || appConfig.polyfills) { const typescriptConfigPartial = isAoT ? getWebpackAotConfigPartial(projectRoot, appConfig, i18nFile, i18nFormat, locale) : getWebpackNonAotConfigPartial(projectRoot, appConfig); diff --git a/packages/angular-cli/plugins/karma.js b/packages/angular-cli/plugins/karma.js index 16c4fc7cafea..a53c2e732181 100644 --- a/packages/angular-cli/plugins/karma.js +++ b/packages/angular-cli/plugins/karma.js @@ -68,6 +68,19 @@ const init = (config) => { .map((file) => config.preprocessors[file]) .map((arr) => arr.splice(arr.indexOf('angular-cli'), 1, 'webpack', 'sourcemap')); + // Add polyfills file + if (appConfig.polyfills) { + const polyfillsFile = path.resolve(appRoot, appConfig.polyfills); + const polyfillsPattern = { + pattern: polyfillsFile, + included: true, + served: true, + watched: true + } + Array.prototype.unshift.apply(config.files, [polyfillsPattern]); + config.preprocessors[polyfillsFile] = ['webpack', 'sourcemap']; + } + // Add global scripts if (appConfig.scripts && appConfig.scripts.length > 0) { const globalScriptPatterns = appConfig.scripts diff --git a/tests/e2e/tests/build/polyfills.ts b/tests/e2e/tests/build/polyfills.ts new file mode 100644 index 000000000000..2e1e5ded3938 --- /dev/null +++ b/tests/e2e/tests/build/polyfills.ts @@ -0,0 +1,18 @@ +import { expectFileToMatch } from '../../utils/fs'; +import { ng } from '../../utils/process'; +import { oneLineTrim } from 'common-tags'; + +export default function () { + return Promise.resolve() + .then(() => ng('build')) + // files were created successfully + .then(() => expectFileToMatch('dist/polyfills.bundle.js', 'core-js')) + .then(() => expectFileToMatch('dist/polyfills.bundle.js', 'zone-js')) + // index.html lists the right bundles + .then(() => expectFileToMatch('dist/index.html', oneLineTrim` + + + + + `)); +} diff --git a/tests/e2e/tests/build/scripts-array.ts b/tests/e2e/tests/build/scripts-array.ts index 7aad2420831b..fd8d1e801284 100644 --- a/tests/e2e/tests/build/scripts-array.ts +++ b/tests/e2e/tests/build/scripts-array.ts @@ -18,14 +18,14 @@ export default function () { }) .then(() => updateJsonFile('angular-cli.json', configJson => { const app = configJson['apps'][0]; - app['scripts'] = [ + app['scripts'] = app['scripts'].concat([ 'string-script.js', { input: 'input-script.js' }, { input: 'lazy-script.js', lazy: true }, { input: 'pre-rename-script.js', output: 'renamed-script' }, { input: 'pre-rename-lazy-script.js', output: 'renamed-lazy-script', lazy: true }, { input: 'common-entry-script.js', output: 'common-entry' } - ]; + ]); app['styles'] = [{ input: 'common-entry-style.css', output: 'common-entry' }]; })) .then(() => ng('build')) @@ -43,6 +43,7 @@ export default function () { `)) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` + diff --git a/tests/e2e/tests/build/styles/styles-array.ts b/tests/e2e/tests/build/styles/styles-array.ts index e43c03160914..afd3019d6644 100644 --- a/tests/e2e/tests/build/styles/styles-array.ts +++ b/tests/e2e/tests/build/styles/styles-array.ts @@ -28,7 +28,9 @@ export default function () { { input: 'pre-rename-lazy-style.css', output: 'renamed-lazy-style', lazy: true }, { input: 'common-entry-style.css', output: 'common-entry' } ]; - app['scripts'] = [{ input: 'common-entry-script.js', output: 'common-entry' }]; + app['scripts'] = app['scripts'].concat( + [{ input: 'common-entry-script.js', output: 'common-entry' }] + ); })) .then(() => ng('build')) // files were created successfully @@ -52,8 +54,10 @@ export default function () { `)) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` - + + + `)) .then(() => ng('build', '--no-extract-css')) diff --git a/tests/e2e/tests/test/test-scripts.ts b/tests/e2e/tests/test/test-scripts.ts index 2e4d581d1bb5..aa7b6c23e1f9 100644 --- a/tests/e2e/tests/test/test-scripts.ts +++ b/tests/e2e/tests/test/test-scripts.ts @@ -60,10 +60,10 @@ export default function () { .then(() => expectToFail(() => ng('test', '--single-run'))) .then(() => updateJsonFile('angular-cli.json', configJson => { const app = configJson['apps'][0]; - app['scripts'] = [ + app['scripts'] = app['scripts'].concat([ 'string-script.js', { input: 'input-script.js' } - ]; + ]); })) // should pass now .then(() => ng('test', '--single-run')); diff --git a/tests/e2e/tests/third-party/bootstrap.ts b/tests/e2e/tests/third-party/bootstrap.ts index 23f922440970..f99fc436b339 100644 --- a/tests/e2e/tests/third-party/bootstrap.ts +++ b/tests/e2e/tests/third-party/bootstrap.ts @@ -23,6 +23,7 @@ export default function() { .then(() => expectFileToMatch('dist/styles.bundle.css', '* Bootstrap')) .then(() => expectFileToMatch('dist/index.html', oneLineTrim` +