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