feat(@angular-devkit/build-angular): allow control of index output path

This allows the output path of an application's index HTML file to be controlled independently of the input file.  The output path for the file will be considered relative to the application's configured output path.  This allows an application to contain multiple input index files for different configurations and allow the output file to remain constant.  This also enables the placement of the index file in a subdirectory within the output path or change the name of the output index file neither of which was previously possible.

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -63,7 +63,6 @@ export interface BuildOptions {
   es5BrowserSupport?: boolean;
 
   main: string;
-  index: string;
   polyfills?: string;
   budgets: Budget[];
   assets: AssetPatternClass[];

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/write-index-html.ts

@@ -7,7 +7,7 @@
  */
 
 import { EmittedFiles } from '@angular-devkit/build-webpack';
-import { Path, basename, getSystemPath, join, virtualFs } from '@angular-devkit/core';
+import { Path, dirname, getSystemPath, join, virtualFs } from '@angular-devkit/core';
 import { Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { ExtraEntryPoint } from '../../../browser/schema';
@@ -66,15 +66,15 @@ export function writeIndexHtml({
         moduleFiles: filterAndMapBuildFiles(moduleFiles, '.js'),
         loadOutputFile: async filePath => {
           return host
-            .read(join(outputPath, filePath))
+            .read(join(dirname(outputPath), filePath))
             .pipe(map(data => virtualFs.fileBufferToString(data)))
             .toPromise();
         },
       }),
     ),
     switchMap(content => (postTransform ? postTransform(content) : of(content))),
     map(content => virtualFs.stringToFileBuffer(content)),
-    switchMap(content => host.write(join(outputPath, basename(indexPath)), content)),
+    switchMap(content => host.write(outputPath, content)),
   );
 }
 

packages/angular_devkit/build_angular/src/browser/index.ts

@@ -55,7 +55,11 @@ import {
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, deleteOutputDir } from '../utils';
 import { assertCompatibleAngularVersion } from '../utils/version';
-import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
+import {
+  generateBrowserWebpackConfigFromContext,
+  getIndexInputFile,
+  getIndexOutputFile,
+} from '../utils/webpack-browser-config';
 import { Schema as BrowserBuilderSchema } from './schema';
 
 export type BrowserBuilderOutput = json.JsonObject &
@@ -252,8 +256,8 @@ export function buildWebpackBrowser(
 
             return writeIndexHtml({
               host,
-              outputPath: resolve(root, normalize(options.outputPath)),
-              indexPath: join(root, options.index),
+              outputPath: resolve(root, join(normalize(options.outputPath), getIndexOutputFile(options))),
+              indexPath: join(root, getIndexInputFile(options)),
               files,
               noModuleFiles,
               moduleFiles,

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -270,8 +270,31 @@
       "x-deprecated": true
     },
     "index": {
-      "type": "string",
-      "description": "The name of the index HTML file."
+      "description": "Configures the generation of the application's HTML index.",
+      "oneOf": [
+        {
+          "type": "string",
+          "description": "The path of a file to use for the application's HTML index. The filename of the specified path will be used for the generated file and will be created in the root of the application's configured output path."
+        },
+        {
+          "type": "object",
+          "description": "",
+          "properties": {
+            "input": {
+              "type": "string",
+              "minLength": 1,
+              "description": "The path of a file to use for the application's generated HTML index."
+            },
+            "output": {
+              "type": "string",
+              "minLength": 1,
+              "default": "index.html",
+              "description": "The output path of the application's generated HTML index file. The full provided path will be used and will be considered relative to the application's configured output path."
+            }
+          },
+          "required": ["input"]
+        }
+      ]
     },
     "statsJson": {
       "type": "boolean",

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -40,6 +40,7 @@ import { Schema as BrowserBuilderSchema } from '../browser/schema';
 import { ExecutionTransformer } from '../transforms';
 import { BuildBrowserFeatures, normalizeOptimization } from '../utils';
 import { assertCompatibleAngularVersion } from '../utils/version';
+import { getIndexInputFile, getIndexOutputFile } from '../utils/webpack-browser-config';
 import { Schema } from './schema';
 const open = require('open');
 
@@ -190,7 +191,7 @@ export function serveWebpackBrowser(
       }
 
       if (browserOptions.index) {
-        const { scripts = [], styles = [], index, baseHref, tsConfig } = browserOptions;
+        const { scripts = [], styles = [], baseHref, tsConfig } = browserOptions;
         const projectName = context.target
           ? context.target.project
           : workspace.getDefaultProjectName();
@@ -214,8 +215,8 @@ export function serveWebpackBrowser(
 
         webpackConfig.plugins.push(
           new IndexHtmlWebpackPlugin({
-            input: path.resolve(root, index),
-            output: path.basename(index),
+            input: path.resolve(root, getIndexInputFile(browserOptions)),
+            output: getIndexOutputFile(browserOptions),
             baseHref,
             moduleEntrypoints,
             entrypoints,
@@ -317,7 +318,7 @@ export function buildServerConfig(
     historyApiFallback:
       !!browserOptions.index &&
       ({
-        index: `${servePath}/${path.basename(browserOptions.index)}`,
+        index: `${servePath}/${getIndexOutputFile(browserOptions)}`,
         disableDotRule: true,
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
         rewrites: [

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -208,3 +208,19 @@ export async function generateBrowserWebpackConfigFromContext(
 
   return { workspace, config };
 }
+
+export function getIndexOutputFile(options: BrowserBuilderSchema): string {
+  if (typeof options.index === 'string') {
+    return path.basename(options.index);
+  } else {
+    return options.index.output || 'index.html';
+  }
+}
+
+export function getIndexInputFile(options: BrowserBuilderSchema): string {
+  if (typeof options.index === 'string') {
+    return options.index;
+  } else {
+    return options.index.input;
+  }
+}

packages/angular_devkit/build_angular/test/browser/index_spec_large.ts

@@ -5,14 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import { Architect } from '@angular-devkit/architect';
-import { join, normalize, tags, virtualFs } from '@angular-devkit/core';
+import { join, normalize, tags, virtualFs, workspaces } from '@angular-devkit/core';
 import { BrowserBuilderOutput } from '../../src/browser';
 import { createArchitect, host } from '../utils';
 
-
-describe('Browser Builder works with BOM index.html', () => {
+// tslint:disable-next-line:no-big-function
+describe('Browser Builder index HTML processing', () => {
   const targetSpec = { project: 'app', target: 'build' };
   let architect: Architect;
 
@@ -108,4 +107,134 @@ describe('Browser Builder works with BOM index.html', () => {
     );
     await run.stop();
   });
+
+  it('uses the input value from the index option longform', async () => {
+    const { workspace } = await workspaces.readWorkspace(host.root(), workspaces.createWorkspaceHost(host));
+    const app = workspace.projects.get('app');
+    if (!app) {
+      fail('Test application "app" not found.');
+
+      return;
+    }
+    const target = app.targets.get('build');
+    if (!target) {
+      fail('Test application "app" target "build" not found.');
+
+      return;
+    }
+    if (!target.options) {
+      target.options = {};
+    }
+    target.options.index = { input: 'src/index-2.html' };
+    await workspaces.writeWorkspace(workspace, workspaces.createWorkspaceHost(host));
+
+    host.writeMultipleFiles({
+      'src/index-2.html': tags.oneLine`
+        <html><head><base href="/"><%= csrf_meta_tags %></head>
+        <body><app-root></app-root></body></html>
+      `,
+    });
+    await host.delete(join(host.root(), normalize('src/index.html'))).toPromise();
+
+    // Recreate architect to use update angular.json
+    architect = (await createArchitect(host.root())).architect;
+
+    const run = await architect.scheduleTarget(targetSpec);
+    await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: true }));
+
+    const outputIndexPath = join(host.root(), 'dist', 'index.html');
+    const content = await host.read(normalize(outputIndexPath)).toPromise();
+    expect(virtualFs.fileBufferToString(content)).toBe(
+      `<html><head><base href="/"><%= csrf_meta_tags %></head> `
+      + `<body><app-root></app-root><script src="runtime.js"></script>`
+      + `<script src="polyfills.js"></script><script src="styles.js"></script>`
+      + `<script src="vendor.js"></script><script src="main.js"></script></body></html>`,
+    );
+  });
+
+  it('uses the output value from the index option longform', async () => {
+    const { workspace } = await workspaces.readWorkspace(host.root(), workspaces.createWorkspaceHost(host));
+    const app = workspace.projects.get('app');
+    if (!app) {
+      fail('Test application "app" not found.');
+
+      return;
+    }
+    const target = app.targets.get('build');
+    if (!target) {
+      fail('Test application "app" target "build" not found.');
+
+      return;
+    }
+    if (!target.options) {
+      target.options = {};
+    }
+    target.options.index = { input: 'src/index.html', output: 'main.html' };
+    await workspaces.writeWorkspace(workspace, workspaces.createWorkspaceHost(host));
+
+    host.writeMultipleFiles({
+      'src/index.html': tags.oneLine`
+        <html><head><base href="/"></head>
+        <body><app-root></app-root></body></html>
+      `,
+    });
+
+    // Recreate architect to use update angular.json
+    architect = (await createArchitect(host.root())).architect;
+
+    const run = await architect.scheduleTarget(targetSpec);
+    await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: true }));
+
+    const outputIndexPath = join(host.root(), 'dist', 'main.html');
+    const content = await host.read(normalize(outputIndexPath)).toPromise();
+    expect(virtualFs.fileBufferToString(content)).toBe(
+      `<html><head><base href="/"></head> `
+      + `<body><app-root></app-root><script src="runtime.js"></script>`
+      + `<script src="polyfills.js"></script><script src="styles.js"></script>`
+      + `<script src="vendor.js"></script><script src="main.js"></script></body></html>`,
+    );
+  });
+
+  it('creates subdirectories for output value from the index option longform', async () => {
+    const { workspace } = await workspaces.readWorkspace(host.root(), workspaces.createWorkspaceHost(host));
+    const app = workspace.projects.get('app');
+    if (!app) {
+      fail('Test application "app" not found.');
+
+      return;
+    }
+    const target = app.targets.get('build');
+    if (!target) {
+      fail('Test application "app" target "build" not found.');
+
+      return;
+    }
+    if (!target.options) {
+      target.options = {};
+    }
+    target.options.index = { input: 'src/index.html', output: 'extra/main.html' };
+    await workspaces.writeWorkspace(workspace, workspaces.createWorkspaceHost(host));
+
+    host.writeMultipleFiles({
+      'src/index.html': tags.oneLine`
+        <html><head><base href="/"></head>
+        <body><app-root></app-root></body></html>
+      `,
+    });
+
+    // Recreate architect to use update angular.json
+    architect = (await createArchitect(host.root())).architect;
+
+    const run = await architect.scheduleTarget(targetSpec);
+    await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: true }));
+
+    const outputIndexPath = join(host.root(), 'dist', 'extra', 'main.html');
+    const content = await host.read(normalize(outputIndexPath)).toPromise();
+    expect(virtualFs.fileBufferToString(content)).toBe(
+      `<html><head><base href="/"></head> `
+      + `<body><app-root></app-root><script src="runtime.js"></script>`
+      + `<script src="polyfills.js"></script><script src="styles.js"></script>`
+      + `<script src="vendor.js"></script><script src="main.js"></script></body></html>`,
+    );
+  });
 });