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,7 @@ 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(appConfig),
         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,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

packages/angular-cli/utilities/package-chunk-sort.ts

@@ -1,17 +1,36 @@
-export function packageChunkSort(packages: string[]) {
-  return function sort(left: any, right: any) {
-    let leftIndex = packages.indexOf(left.names[0]);
-    let rightindex = packages.indexOf(right.names[0]);
+import { ExtraEntry, extraEntryParser } from '../models/webpack-build-utils';
 
-    if ( leftIndex < 0 || rightindex < 0) {
-      // Unknown packages are loaded last
-      return 1;
+// Sort chunks according to a predefined order:
+// inline, polyfills, all scripts, all styles, vendor, main
+export function packageChunkSort(appConfig: any) {
+  let entryPoints = ['inline', 'polyfills'];
+
+  const pushExtraEntries = (extraEntry: ExtraEntry) => {
+    if (entryPoints.indexOf(extraEntry.entry) === -1) {
+      entryPoints.push(extraEntry.entry);
     }
+  };
+
+  if (appConfig.scripts) {
+    extraEntryParser(appConfig.scripts, './', 'scripts').forEach(pushExtraEntries);
+  }
+
+  if (appConfig.styles) {
+    extraEntryParser(appConfig.styles, './', 'styles').forEach(pushExtraEntries);
+  }
+
+  entryPoints.push(...['vendor', 'main']);
+
+  return function sort(left: any, right: any) {
+    let leftIndex = entryPoints.indexOf(left.names[0]);
+    let rightindex = entryPoints.indexOf(right.names[0]);
 
     if (leftIndex > rightindex) {
       return 1;
+    } else if (leftIndex < rightindex) {
+      return -1;
+    } else {
+      return 0;
     }
-
-    return -1;
   };
 }

tests/e2e/tests/build/polyfills.ts

@@ -0,0 +1,16 @@
+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>
+    `));
+}

tests/e2e/tests/build/scripts-array.ts

@@ -43,9 +43,10 @@ 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="scripts.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>
       <script type="text/javascript" src="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
     `));

tests/e2e/tests/build/styles/styles-array.ts

@@ -52,8 +52,9 @@ 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="vendor.bundle.js"></script>
       <script type="text/javascript" src="main.bundle.js"></script>
     `))
     .then(() => ng('build', '--no-extract-css'))

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>