feat(@angular/cli): add index html plugin

Author: clydin

package-lock.json

@@ -74,6 +74,7 @@
     "node-modules-path": "^1.0.0",
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
+    "parse5": "^4.0.0",
     "portfinder": "~1.0.12",
     "postcss": "^6.0.16",
     "postcss-import": "^11.0.0",

package.json

@@ -3,8 +3,9 @@ import * as path from 'path';
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 
-import { packageChunkSort } from '../../utilities/package-chunk-sort';
+import { generateEntryPoints, packageChunkSort } from '../../utilities/package-chunk-sort';
 import { BaseHrefWebpackPlugin } from '../../lib/base-href-webpack';
+import { IndexHtmlWebpackPlugin } from '../../plugins/index-html-webpack-plugin';
 import { extraEntryParser, lazyChunksFilter } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 
@@ -99,7 +100,15 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
         }
       }
     },
-    plugins: extraPlugins,
+    plugins: extraPlugins.concat([
+      new IndexHtmlWebpackPlugin({
+        input: path.resolve(appRoot, appConfig.index),
+        output: appConfig.index,
+        baseHref: buildOptions.baseHref,
+        entrypoints: generateEntryPoints(appConfig),
+        deployUrl: buildOptions.deployUrl,
+      }),
+    ]),
     node: {
       fs: 'empty',
       global: true,

packages/@angular/cli/models/webpack-configs/browser.ts

@@ -60,6 +60,7 @@
     "node-modules-path": "^1.0.0",
     "nopt": "^4.0.1",
     "opn": "~5.1.0",
+    "parse5": "^4.0.0",
     "portfinder": "~1.0.12",
     "postcss": "^6.0.16",
     "postcss-import": "^11.0.0",

packages/@angular/cli/package.json

@@ -0,0 +1,160 @@
+import { RawSource } from 'webpack-sources';
+
+const parse5 = require('parse5');
+
+export interface IndexHtmlWebpackPluginOptions {
+  input: string;
+  output: string;
+  baseHref?: string;
+  entrypoints: string[];
+  deployUrl?: string;
+}
+
+function readFile(filename: string, compilation: any): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    compilation.inputFileSystem.readFile(filename, (err: Error, data: Buffer) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      const content = data.toString();
+      resolve(content);
+    });
+  });
+}
+
+export class IndexHtmlWebpackPlugin {
+  private _options: IndexHtmlWebpackPluginOptions;
+
+  constructor(options?: Partial<IndexHtmlWebpackPluginOptions>) {
+    this._options = {
+      input: 'index.html',
+      output: 'index.html',
+      entrypoints: ['polyfills', 'main'],
+      ...options
+    };
+  }
+
+  apply(compiler: any) {
+    compiler.hooks.emit.tapPromise('index-html-webpack-plugin', async (compilation: any) => {
+      // Get input html file
+      const inputContent = await readFile(this._options.input, compilation);
+      compilation.fileDependencies.add(this._options.input);
+
+
+      // Get all files for selected entrypoints
+      const unfilteredSortedFiles: string[] = [];
+      for (const entryName of this._options.entrypoints) {
+        const entrypoint = compilation.entrypoints.get(entryName);
+        if (entrypoint) {
+          unfilteredSortedFiles.push(...entrypoint.getFiles());
+        }
+      }
+
+      // Filter files
+      const existingFiles = new Set<string>();
+      const stylesheets: string[] = [];
+      const scripts: string[] = [];
+      for (const file of unfilteredSortedFiles) {
+        if (existingFiles.has(file)) {
+          continue;
+        }
+        existingFiles.add(file);
+
+        if (file.endsWith('.js')) {
+          scripts.push(file);
+        } else if (file.endsWith('.css')) {
+          stylesheets.push(file);
+        }
+
+      }
+
+      // Find the head and body elements
+      const treeAdapter = parse5.treeAdapters.default;
+      const document = parse5.parse(inputContent, { treeAdapter });
+      let headElement;
+      let bodyElement;
+      for (const topNode of document.childNodes) {
+        if (topNode.tagName === 'html') {
+          for (const htmlNode of topNode.childNodes) {
+            if (htmlNode.tagName === 'head') {
+              headElement = htmlNode;
+            }
+            if (htmlNode.tagName === 'body') {
+              bodyElement = htmlNode;
+            }
+          }
+        }
+      }
+
+      // Inject into the html
+
+      if (!headElement || !bodyElement) {
+        throw new Error('Missing head and/or body elements');
+      }
+
+      for (const script of scripts) {
+        const element = treeAdapter.createElement(
+          'script',
+          undefined,
+          [
+            { name: 'type', value: 'text/javascript' },
+            { name: 'src', value: (this._options.deployUrl || '') + script },
+          ]
+        );
+        treeAdapter.appendChild(bodyElement, element);
+      }
+
+      // Adjust base href if specified
+      if (this._options.baseHref != undefined) {
+        let baseElement;
+        for (const node of headElement.childNodes) {
+          if (node.tagName === 'base') {
+            baseElement = node;
+            break;
+          }
+        }
+
+        if (!baseElement) {
+          const element = treeAdapter.createElement(
+            'base',
+            undefined,
+            [
+              { name: 'href', value: this._options.baseHref },
+            ]
+          );
+          treeAdapter.appendChild(headElement, element);
+        } else {
+          let hrefAttribute;
+          for (const attribute of baseElement.attrs) {
+            if (attribute.name === 'href') {
+              hrefAttribute = attribute;
+            }
+          }
+          if (hrefAttribute) {
+            hrefAttribute.value = this._options.baseHref;
+          } else {
+            baseElement.attrs.push({ name: 'href', value: this._options.baseHref });
+          }
+        }
+      }
+
+      for (const stylesheet of stylesheets) {
+        const element = treeAdapter.createElement(
+          'link',
+          undefined,
+          [
+            { name: 'rel', value: 'stylesheet' },
+            { name: 'href', value: (this._options.deployUrl || '') + stylesheet },
+          ]
+        );
+        treeAdapter.appendChild(headElement, element);
+      }
+
+      // Add to compilation assets
+      const outputContent = parse5.serialize(document, { treeAdapter });
+      compilation.assets[this._options.output] = new RawSource(outputContent);
+    });
+  }
+}

packages/@angular/cli/plugins/index-html-webpack-plugin.ts

@@ -39,14 +39,14 @@ export class SuppressExtractedTextChunksWebpackPlugin {
       });
       // Remove scripts tags with a css file as source, because HtmlWebpackPlugin will use
       // a css file as a script for chunks without js files.
-      compilation.plugin('html-webpack-plugin-alter-asset-tags',
-        (htmlPluginData: any, callback: any) => {
-          const filterFn = (tag: any) =>
-            !(tag.tagName === 'script' && tag.attributes.src && tag.attributes.src.match(/\.css$/));
-          htmlPluginData.head = htmlPluginData.head.filter(filterFn);
-          htmlPluginData.body = htmlPluginData.body.filter(filterFn);
-          callback(null, htmlPluginData);
-        });
+      // compilation.plugin('html-webpack-plugin-alter-asset-tags',
+      //   (htmlPluginData: any, callback: any) => {
+      //     const filterFn = (tag: any) =>
+      //    !(tag.tagName === 'script' && tag.attributes.src && tag.attributes.src.match(/\.css$/));
+      //     htmlPluginData.head = htmlPluginData.head.filter(filterFn);
+      //     htmlPluginData.body = htmlPluginData.body.filter(filterFn);
+      //     callback(null, htmlPluginData);
+      //   });
     });
   }
 }

packages/@angular/cli/plugins/suppress-entry-chunks-webpack-plugin.ts

@@ -1,9 +1,7 @@
 import { ExtraEntry, extraEntryParser } from '../models/webpack-configs/utils';
 
-// Sort chunks according to a predefined order:
-// inline, polyfills, all styles, vendor, main
-export function packageChunkSort(appConfig: any) {
-  let entryPoints = ['inline', 'polyfills', 'sw-register'];
+export function generateEntryPoints(appConfig: any) {
+  let entryPoints = ['polyfills', 'sw-register'];
 
   const pushExtraEntries = (extraEntry: ExtraEntry) => {
     if (entryPoints.indexOf(extraEntry.entry) === -1) {
@@ -23,7 +21,15 @@ export function packageChunkSort(appConfig: any) {
       .forEach(pushExtraEntries);
   }
 
-  entryPoints.push(...['vendor', 'main']);
+  entryPoints.push('main');
+
+  return entryPoints;
+}
+
+// Sort chunks according to a predefined order:
+// inline, polyfills, all styles, vendor, main
+export function packageChunkSort(appConfig: any) {
+  const entryPoints = generateEntryPoints(appConfig);
 
   function sort(left: any, right: any) {
     let leftIndex = entryPoints.indexOf(left.names[0]);