feat(builders): extract routes with guess-js (#1426)

Use the static routes inferred from the routing module as initial set of routes to prerender.

Can set the builder `guessRoutes` option to `false` to turn off this behavior.

Author: wagnermaciel

modules/builders/BUILD.bazel

@@ -28,6 +28,7 @@ ts_library(
         "@npm//@types/browser-sync",
         "@npm//@types/http-proxy-middleware",
         "@npm//browser-sync",
+        "@npm//guess-parser",
         "@npm//http-proxy-middleware",
         "@npm//rxjs",
         "@npm//tree-kill",
@@ -85,6 +86,7 @@ ng_test_library(
         "@npm//@angular-devkit/core",
         "@npm//@types/browser-sync",
         "@npm//@types/shelljs",
+        "@npm//guess-parser",
         "@npm//rxjs",
     ],
 )

modules/builders/package.json

@@ -19,7 +19,8 @@
     "browser-sync": "^2.26.7",
     "http-proxy-middleware": "^0.20.0",
     "rxjs": "RXJS_VERSION",
-    "tree-kill": "^1.2.1"
+    "tree-kill": "^1.2.1",
+    "guess-parser": "^0.4.12"
   },
   "ng-update": {
     "packageGroup": "NG_UPDATE_PACKAGE_GROUP"

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

@@ -38,7 +38,7 @@ describe('Prerender Builder', () => {
   });
 
   it('fails with error when no routes are provided', async () => {
-    const run = await architect.scheduleTarget(target, { routes: [] });
+    const run = await architect.scheduleTarget(target, { routes: [], guessRoutes: false });
     await expectAsync(run.result).toBeRejectedWith(
       jasmine.objectContaining({ message: jasmine.stringMatching(/No routes found/)})
     );
@@ -127,4 +127,36 @@ describe('Prerender Builder', () => {
     );
     await run.stop();
   });
+
+  it('should guess routes to prerender when guessRoutes is set to true.', async () => {
+    const run = await architect.scheduleTarget(target, {
+      routes: ['/foo'],
+      guessRoutes: true,
+    });
+
+    const output = await run.result;
+
+    const fooContent = virtualFs.fileBufferToString(
+      host.scopedSync().read(join(outputPathBrowser, 'foo/index.html'))
+    );
+    const fooBarContent = virtualFs.fileBufferToString(
+      host.scopedSync().read(join(outputPathBrowser, 'foo/bar/index.html'))
+    );
+    const appContent = virtualFs.fileBufferToString(
+      host.scopedSync().read(join(outputPathBrowser, 'index.html'))
+    );
+
+    expect(output.success).toBe(true);
+
+    expect(appContent).toContain('app app is running!');
+    expect(appContent).toContain('This page was prerendered with Angular Universal');
+
+    expect(fooContent).toContain('foo works!');
+    expect(fooContent).toContain('This page was prerendered with Angular Universal');
+
+    expect(fooBarContent).toContain('foo-bar works!');
+    expect(fooBarContent).toContain('This page was prerendered with Angular Universal');
+
+    await run.stop();
+  });
 });

modules/builders/src/prerender/index.ts

@@ -7,18 +7,15 @@
  */
 
 import { BuilderContext, BuilderOutput, createBuilder, targetFromTargetString } from '@angular-devkit/architect';
-import { json } from '@angular-devkit/core';
 import { fork } from 'child_process';
-
 import * as fs from 'fs';
 import * as path from 'path';
 
-import { Schema } from './schema';
+import { PrerenderBuilderOptions, PrerenderBuilderOutput } from './models';
 import { getRoutes, shardArray } from './utils';
 
-export type PrerenderBuilderOptions = Schema & json.JsonObject;
-
-export type PrerenderBuilderOutput = BuilderOutput;
+export type PrerenderBuilderOptions = PrerenderBuilderOptions;
+export type PrerenderBuilderOutput = PrerenderBuilderOutput;
 
 type BuildBuilderOutput = BuilderOutput & {
   baseOutputPath: string;
@@ -101,7 +98,7 @@ async function _parallelRenderRoutes(
 }
 
 /**
- * Renders each route in options.routes and writes them to
+ * Renders each route and writes them to
  * <route>/index.html for each output path in the browser result.
  */
 async function _renderUniversal(
@@ -147,10 +144,11 @@ export async function execute(
   options: PrerenderBuilderOptions,
   context: BuilderContext
 ): Promise<PrerenderBuilderOutput> {
-  const routes = getRoutes(context.workspaceRoot, options.routesFile, options.routes);
+  const routes = await getRoutes(options, context);
   if (!routes.length) {
     throw new Error('No routes found.');
   }
+
   const result = await _scheduleBuilds(options, context);
   const { success, error, browserResult, serverResult } = result;
   if (!success || !browserResult || !serverResult) {

modules/builders/src/prerender/models.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 { BuilderOutput } from '@angular-devkit/architect';
+import { json } from '@angular-devkit/core';
+import { Schema } from './schema';
+
+export type PrerenderBuilderOptions = Schema & json.JsonObject;
+
+export type PrerenderBuilderOutput = BuilderOutput;

modules/builders/src/prerender/schema.json

@@ -27,6 +27,11 @@
       },
       "default": []
     },
+    "guessRoutes": {
+      "type": "boolean",
+      "description": "Whether or not the builder should extract routes and guess which paths to render.",
+      "default": true
+    },
     "numProcesses": {
       "type": "number",
       "description": "The number of cpus to use. Defaults to all but one.",

modules/builders/src/prerender/schema.ts

@@ -11,6 +11,10 @@ export interface Schema {
    * Target to build.
    */
   browserTarget: string;
+  /**
+   * Whether or not the builder should extract routes and guess which paths to render.
+   */
+  guessRoutes?: boolean;
   /**
    * The number of cpus to use. Defaults to all but one.
    */

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

@@ -6,33 +6,77 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import * as Architect from '@angular-devkit/architect';
+import { NullLogger } from '@angular-devkit/core/src/logger';
 import * as fs from 'fs';
+import * as guessParser from 'guess-parser';
+import { RoutingModule } from 'guess-parser/dist/common/interfaces';
+import 'jasmine';
+
+import { PrerenderBuilderOptions } from './models';
 import { getRoutes, shardArray } from './utils';
 
+
 describe('Prerender Builder Utils', () => {
   describe('#getRoutes', () => {
-    const WORKSPACE_ROOT = '/path/to/angular/json';
     const ROUTES_FILE = './routes.txt';
     const ROUTES_FILE_CONTENT = ['/route1', '/route1', '/route2', '/route3'].join('\n');
     const ROUTES = ['/route3', '/route3', '/route4'];
+    const GUESSED_ROUTES = [{ path: '/route4' }, { path: '/route5' }, { path: '/**' }, { path: '/user/:id' }];
+
+    const CONTEXT = {
+      workspaceRoot: '/path/to/angular/json',
+      getTargetOptions: () => ({ tsConfig: 'tsconfig.app.json' }),
+      logger: new NullLogger(),
+    } as unknown as Architect.BuilderContext;
+
+    let parseAngularRoutesSpy: jasmine.Spy;
+    let loggerErrorSpy: jasmine.Spy;
 
     beforeEach(() => {
       spyOn(fs, 'readFileSync').and.returnValue(ROUTES_FILE_CONTENT);
+      spyOn(Architect, 'targetFromTargetString').and.returnValue({} as Architect.Target);
+      parseAngularRoutesSpy = spyOn(guessParser, 'parseAngularRoutes')
+        .and.returnValue(GUESSED_ROUTES as RoutingModule[]);
+      loggerErrorSpy = spyOn(CONTEXT.logger, 'error');
+    });
+
+    it('Should return the union of the routes from routes, routesFile, and the extracted routes without any parameterized routes', async () => {
+      const options = {
+        routes: ROUTES,
+        routesFile: ROUTES_FILE,
+        guessRoutes: true,
+      } as unknown as PrerenderBuilderOptions;
+      const routes = await getRoutes(options, CONTEXT);
+      expect(routes).toContain('/route1');
+      expect(routes).toContain('/route2');
+      expect(routes).toContain('/route3');
+      expect(routes).toContain('/route4');
+      expect(routes).toContain('/route5');
     });
 
-    it('Should return the deduped union of options.routes and options.routesFile - routes and routesFile defined', () => {
-      const routes = getRoutes(WORKSPACE_ROOT, ROUTES_FILE, ROUTES);
-      expect(routes).toEqual(['/route1', '/route2', '/route3', '/route4']);
+    it('Should return only the given routes', async () => {
+      const options = { routes: ROUTES } as PrerenderBuilderOptions;
+      const routes = await getRoutes(options, CONTEXT);
+      expect(routes).toContain('/route3');
+      expect(routes).toContain('/route4');
     });
 
-    it('Should return the deduped union of options.routes and options.routesFile - only routes defined', () => {
-      const routes = getRoutes(WORKSPACE_ROOT, undefined, ROUTES);
-      expect(routes).toEqual(['/route3', '/route4']);
+    it('Should return the routes from the routesFile', async () => {
+      const options = { routesFile: ROUTES_FILE } as PrerenderBuilderOptions;
+      const routes = await getRoutes(options, CONTEXT);
+      expect(routes).toContain('/route1');
+      expect(routes).toContain('/route2');
+      expect(routes).toContain('/route3');
     });
 
-    it('Should return the deduped union of options.routes and options.routesFile - only routes file defined', () => {
-      const routes = getRoutes(WORKSPACE_ROOT, ROUTES_FILE, undefined);
-      expect(routes).toEqual(['/route1', '/route2', '/route3']);
+    it('Should catch errors thrown by parseAngularRoutes', async () => {
+      const options = { routes: ROUTES, guessRoutes: true } as PrerenderBuilderOptions;
+      parseAngularRoutesSpy.and.throwError('Test Error');
+      const routes = await getRoutes(options, CONTEXT);
+      expect(routes).toContain('/route3');
+      expect(routes).toContain('/route4');
+      expect(loggerErrorSpy).toHaveBeenCalled();
     });
   });
 

modules/builders/src/prerender/utils.ts

@@ -6,28 +6,50 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
 import * as fs from 'fs';
+import { parseAngularRoutes } from 'guess-parser';
 import * as os from 'os';
 import * as path from 'path';
 
+import { PrerenderBuilderOptions } from './models';
+
 /**
- * Returns the concatenation of options.routes and the contents of options.routesFile.
+ * Returns the union of routes, the contents of routesFile if given,
+ * and the static routes extracted if guessRoutes is set to true.
  */
-export function getRoutes(
-  workspaceRoot: string,
-  routesFile?: string,
-  routes: string[] = [],
-): string[] {
-  let routesFileResult: string[] = [];
-  if (routesFile) {
-    const routesFilePath = path.resolve(workspaceRoot, routesFile);
-
-    routesFileResult = fs.readFileSync(routesFilePath, 'utf8')
-      .split(/\r?\n/)
-      .filter(v => !!v);
+export async function getRoutes(
+  options: PrerenderBuilderOptions,
+  context: BuilderContext,
+): Promise<string[]> {
+  let routes: string[] = options.routes ? options.routes : [];
+
+  if (options.routesFile) {
+    const routesFilePath = path.resolve(context.workspaceRoot, options.routesFile);
+    routes = routes.concat(
+      fs.readFileSync(routesFilePath, 'utf8')
+        .split(/\r?\n/)
+        .filter(v => !!v)
+    );
+  }
+
+  if (options.guessRoutes) {
+    const browserTarget = targetFromTargetString(options.browserTarget);
+    const { tsConfig } = await context.getTargetOptions(browserTarget);
+    if (tsConfig) {
+      try {
+        routes = routes.concat(
+          parseAngularRoutes(path.join(context.workspaceRoot, tsConfig as string))
+            .map(routeObj => routeObj.path)
+            .filter(route => !route.includes('*') && !route.includes(':'))
+        );
+      } catch (e) {
+        context.logger.error('Unable to extract routes from application.', e);
+      }
+    }
   }
 
-  return [...new Set([...routesFileResult, ...routes])];
+  return [...new Set(routes)];
 }
 
 /**

package.json

@@ -72,6 +72,7 @@
     "browser-sync": "^2.26.7",
     "domino": "^2.1.2",
     "express": "^4.15.2",
+    "guess-parser": "^0.4.12",
     "http-proxy-middleware": "^0.20.0",
     "jasmine-core": "^3.0.0",
     "karma": "^4.1.0",