fix(prerender): use browser builder's index option in prerender builder

Fixes #1585

Author: wagnermaciel

integration/express-engine-ivy-prerender/angular.json

@@ -39,7 +39,10 @@
           "options": {
             "progress": false,
             "outputPath": "dist/express-engine-ivy-prerender/browser",
-            "index": "src/index.html",
+            "index": {
+              "input": "src/index.html",
+              "output": "src/home.html"
+            },
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",

modules/builders/BUILD.bazel

@@ -24,6 +24,7 @@ ts_library(
     tsconfig = ":bazel-tsconfig-build.json",
     deps = [
         "@npm//@angular-devkit/architect",
+        "@npm//@angular-devkit/build-angular",
         "@npm//@angular-devkit/core",
         "@npm//@types/browser-sync",
         "@npm//browser-sync",
@@ -81,6 +82,7 @@ ng_test_library(
     deps = [
         ":builders",
         "@npm//@angular-devkit/architect",
+        "@npm//@angular-devkit/build-angular",
         "@npm//@angular-devkit/core",
         "@npm//@types/browser-sync",
         "@npm//@types/shelljs",

modules/builders/src/prerender/index.ts

@@ -7,12 +7,13 @@
  */
 
 import { BuilderContext, BuilderOutput, createBuilder, targetFromTargetString } from '@angular-devkit/architect';
+import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { fork } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 
 import { PrerenderBuilderOptions, PrerenderBuilderOutput } from './models';
-import { getRoutes, shardArray } from './utils';
+import { getIndexOutputFile, getRoutes, shardArray } from './utils';
 
 type BuildBuilderOutput = BuilderOutput & {
   baseOutputPath: string;
@@ -67,13 +68,15 @@ async function _parallelRenderRoutes(
   context: BuilderContext,
   indexHtml: string,
   outputPath: string,
+  indexFile: string,
   serverBundlePath: string,
   ): Promise<void> {
   const workerFile = path.join(__dirname, 'render.js');
   const childProcesses = shardedRoutes.map(routes =>
     new Promise((resolve, reject) => {
       fork(workerFile, [
         indexHtml,
+        indexFile,
         serverBundlePath,
         outputPath,
         ...routes,
@@ -103,12 +106,15 @@ async function _renderUniversal(
   context: BuilderContext,
   browserResult: BuildBuilderOutput,
   serverResult: BuildBuilderOutput,
+  browserOptions: BrowserBuilderOptions,
   numProcesses?: number,
 ): Promise<BuildBuilderOutput> {
+  // Users can specify a different base html file e.g. "src/home.html"
+  const indexFile = getIndexOutputFile(browserOptions);
   // We need to render the routes for each locale from the browser output.
   for (const outputPath of browserResult.outputPaths) {
-    const browserIndexOutputPath = path.join(outputPath, 'index.html');
-    const indexHtml = fs.readFileSync(browserIndexOutputPath, 'utf8');
+    const browserIndexInputPath = path.join(outputPath, indexFile);
+    const indexHtml = fs.readFileSync(browserIndexInputPath, 'utf8');
 
     const { baseOutputPath = '' } = serverResult;
     const localeDirectory = path.relative(browserResult.baseOutputPath, outputPath);
@@ -125,6 +131,7 @@ async function _renderUniversal(
       context,
       indexHtml,
       outputPath,
+      indexFile,
       serverBundlePath,
     );
   }
@@ -152,7 +159,18 @@ export async function execute(
     return { success, error } as BuilderOutput;
   }
 
-  return _renderUniversal(routes, context, browserResult, serverResult, options.numProcesses);
+  const browserTarget = targetFromTargetString(options.browserTarget);
+  const browserOptions =
+      await context.getTargetOptions(browserTarget) as unknown as BrowserBuilderOptions;
+
+  return _renderUniversal(
+    routes,
+    context,
+    browserResult,
+    serverResult,
+    browserOptions,
+    options.numProcesses,
+  );
 }
 
 export default createBuilder(execute);

modules/builders/src/prerender/render.ts

@@ -11,6 +11,7 @@ import * as path from 'path';
 
 const [
   indexHtml,
+  indexFile,
   serverBundlePath,
   browserOutputPath,
   ...routes
@@ -50,7 +51,7 @@ async function getServerBundle(bundlePath: string) {
  */
 (async () => {
   const { renderModuleFn, AppServerModuleDef } = await getServerBundle(serverBundlePath);
-  const browserIndexOutputPath = path.join(browserOutputPath, 'index.html');
+  const browserIndexOutputPath = path.join(browserOutputPath, indexFile);
   for (const route of routes) {
     const renderOpts = {
       document: indexHtml + '<!-- This page was prerendered with Angular Universal -->',

modules/builders/src/prerender/utils.spec.ts

@@ -7,12 +7,13 @@
  */
 
 import * as Architect from '@angular-devkit/architect';
+import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import { logging } from '@angular-devkit/core';
 import * as fs from 'fs';
 import * as guessParser from 'guess-parser';
 
 import { PrerenderBuilderOptions } from './models';
-import { getRoutes, shardArray } from './utils';
+import { getIndexOutputFile, getRoutes, shardArray } from './utils';
 
 
 describe('Prerender Builder Utils', () => {
@@ -120,4 +121,17 @@ describe('Prerender Builder Utils', () => {
       expect(result).toEqual([[0], [1], [2], [3], [4]]);
     });
   });
+
+  describe('#getIndexOutputFile', () => {
+    it('Should return only the file name when index is a string', () => {
+      const options = { index: 'src/home.html' } as BrowserBuilderOptions;
+      expect(getIndexOutputFile(options)).toBe('home.html');
+    });
+
+    it('Should return full file path when index is an object', () => {
+      const options =
+        { index: { input: 'src/index.html', output: 'src/home.html' } } as BrowserBuilderOptions;
+      expect(getIndexOutputFile(options)).toBe('src/home.html');
+    });
+  });
 });

modules/builders/src/prerender/utils.ts

@@ -7,6 +7,7 @@
  */
 
 import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
+import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
 import * as fs from 'fs';
 import { parseAngularRoutes } from 'guess-parser';
 import * as os from 'os';
@@ -67,3 +68,14 @@ export function shardArray<T>(items: T[], maxNoOfShards = (os.cpus().length - 1)
 
   return shardedArray;
 }
+
+/**
+ * Returns the name of the index file outputted by the browser builder.
+ */
+export function getIndexOutputFile(options: BrowserBuilderOptions): string {
+  if (typeof options.index === 'string') {
+    return path.basename(options.index);
+  } else {
+    return options.index.output || 'index.html';
+  }
+}