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 angular#2752
Fix angular#3309

Author: filipesilva

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';

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';

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 %>",

packages/angular-cli/lib/config/schema.json

@@ -55,6 +55,9 @@
           "main": {
             "type": "string"
           },
+          "polyfills": {
+            "type": "string"
+          },
           "test": {
             "type": "string"
           },

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
       }),

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);

packages/angular-cli/plugins/karma.js

@@ -68,6 +68,13 @@ 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);
+    Array.prototype.unshift.apply(config.files, [polyfillsFile]);
+    config.preprocessors[polyfillsFile] = ['webpack', 'sourcemap'];
+  }
+
   // Add global scripts
   if (appConfig.scripts && appConfig.scripts.length > 0) {
     const globalScriptPatterns = appConfig.scripts

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`
+      <script type="text/javascript" src="inline.bundle.js"></script>
+      <script type="text/javascript" src="polyfills.bundle.js"></script>
+      <script type="text/javascript" src="vendor.bundle.js"></script>
+      <script type="text/javascript" src="main.bundle.js"></script>
+    `));
+}

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`
       <script type="text/javascript" src="inline.bundle.js"></script>
+      <script type="text/javascript" src="polyfills.bundle.js"></script>
       <script type="text/javascript" src="renamed-script.bundle.js"></script>
       <script type="text/javascript" src="common-entry.bundle.js"></script>
       <script type="text/javascript" src="scripts.bundle.js"></script>

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`
       <script type="text/javascript" src="inline.bundle.js"></script>
-      <script type="text/javascript" src="vendor.bundle.js"></script>
+      <script type="text/javascript" src="polyfills.bundle.js"></script>
       <script type="text/javascript" src="common-entry.bundle.js"></script>
+      <script type="text/javascript" src="scripts.bundle.js"></script>
+      <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
     `))
     .then(() => ng('build', '--no-extract-css'))

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'));

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`
       <script type="text/javascript" src="inline.bundle.js"></script>
+      <script type="text/javascript" src="polyfills.bundle.js"></script>
       <script type="text/javascript" src="scripts.bundle.js"></script>
       <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>