依次运行 angular 自定义构建器

Question

I have an Angular 13 project with some custom made builders. One of these generates a file with a $templateCache module. This can take a few seconds to complete.

The issue is that the main Angular builder starts before the $templateCache builder has completed. This causes the module file to not be included in the build and the application crashes on page load or the build fails with an error saying the module cannot be resolved.

How can I ensure the $templateCache builder has completed before starting the main build?

This is my builder that I am using to run the other custom ones and the Angular builder:

import { CustomScheduleBuilderSchema } from './schema';
import { BuilderContext, BuilderOutput, BuilderRun, createBuilder, ScheduleOptions } from '@angular-devkit/architect';
import { Observable, of, from } from 'rxjs';
import { catchError, finalize, first, mergeMap } from 'rxjs/operators';
import { json, JsonObject } from '@angular-devkit/core';

function scheduleNgBuildTarget(
  options: JsonObject & CustomScheduleBuilderSchema,
  context: BuilderContext,
): Promise<BuilderRun> {
  return context.scheduleTarget({
    target: options.target,
    project: context.target?.project ?? ''
  });
}

function scheduleConcatenateLanguagesBuilder(
  context: BuilderContext
): Promise<BuilderRun> {
  return context.scheduleTarget({
    target: 'concat-lang',
    project: context.target?.project ?? ''
  },
  {
    watchModeEnabled: true
  });
}

function scheduleTemplatesBuilder(
  context: BuilderContext
): Promise<BuilderRun> {
  return context.scheduleTarget({
    target: 'templates',
    project: context.target?.project ?? ''
  },
  {
    watchModeEnabled: true
  });
}

function scheduleVersionBuilder(
  context: BuilderContext
): Promise<BuilderRun> {
  return context.scheduleTarget({
    target: 'version',
    project: context.target?.project ?? ''
  });
}

export function runCustomScheduleBuilder (
  options: JsonObject & CustomScheduleBuilderSchema,
  context: BuilderContext
): Observable<BuilderOutput> {

  const scheduleLogger = context.logger.createChild('CustomSchedule');
  scheduleLogger.info('Starting build');


  return of({ success: true }).pipe(
    first(),
    mergeMap(_ => from(scheduleConcatenateLanguagesBuilder(context))),
    mergeMap(_ => from(scheduleTemplatesBuilder(context))),
    mergeMap(_ => from(scheduleVersionBuilder(context))),
    mergeMap(_ => from(scheduleNgBuildTarget(options, context))), // This should run after the other builders have completed.
    mergeMap(target =>
      target.output.pipe(
        finalize(() => {
          scheduleLogger.info('Shutting down build');
        }),
      ),
    ),
    catchError(e => {
      scheduleLogger.error(JSON.stringify(e));
      return of({ success: false });
    }),
  );
}

export default createBuilder<json.JsonObject & CustomScheduleBuilderSchema>(runCustomScheduleBuilder);

This is the builder that generates the file with the $templateCache module:

import { TemplatesBuilderSchema } from './schema';
import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { json, normalize } from '@angular-devkit/core';
import { Observable, of, noop, from, fromEvent } from 'rxjs';
import { catchError, map, finalize, take, tap, mergeMap, first } from 'rxjs/operators';
import { join } from 'path';
import html2jsProcessor from 'angular-template-cache';
import defaults from 'angular-template-cache/lib/defaults';
import { watch } from 'chokidar';

async function populateTemplateCache(
  options: any,
  templatesLogger: any
) {
  await html2jsProcessor(options);
  templatesLogger.info(`Completed templates file: ${options.output}`)
}

export function runTemplatesBuilder(
  { outputPath, watchModeEnabled }: TemplatesBuilderSchema,
  { workspaceRoot, logger }: BuilderContext
): Observable<BuilderOutput> {
  const templatesLogger = logger.createChild('Templates');
  templatesLogger.info('Creating templates file to populate $templateCache');

  const options = {
    ...defaults,
    strict: false,
    filesGlob: 'src/app/**/*.html',
    moduleName: 'myApp.templates',
    output: join(workspaceRoot, normalize(outputPath)),
  };

  // Setup file watcher
  const watcher = watch('src/app/**/*.html', { ignoreInitial: true });

  watcher.on('add', () => {
    populateTemplateCache(options, templatesLogger);
  })
  .on('change', () => {
    populateTemplateCache(options, templatesLogger);
  })
  .on('unlink', () => {
    populateTemplateCache(options, templatesLogger);
  });

  return fromEvent(watcher, 'ready').pipe(
    tap(() => {
      templatesLogger.info('templates watcher ready...');
    }),
    first(),
    mergeMap(_ => from(populateTemplateCache(options, templatesLogger))),
    map(() => ({ success: true })),
    finalize(() => {
      templatesLogger.info('Shutting down templates file watcher');
      watcher.close();
    }),
    catchError(e => {
      templatesLogger.error(`Failed to create templates file: ${options.output}, Error: ${JSON.stringify(e)}`);
      return of({ success: false });
    }),
    watchModeEnabled ? tap(noop) : take(1),
  );  
}

export default createBuilder<json.JsonObject & TemplatesBuilderSchema>(runTemplatesBuilder);

Answer 1

It seems the scheduleTarget function returns a resolved Promise without waiting for the builder target to complete.

By creating a child instance of a logger and passing it to the builder I can listen for log messages and wait to return the resolved promise until the expected 'Completed templates' message is detected.

async function scheduleTemplatesBuilder(
  context: BuilderContext
): Promise<BuilderRun> {
  const templatesLogger = context.logger.createChild('templates');
  const builderRun = context.scheduleTarget({
    target: 'templates',
    project: context.target?.project ?? ''
  },
  {
    watchModeEnabled: true
  },
  {
    logger: templatesLogger
  });

  await templatesLogger.pipe(
    takeWhile(logEntry => !logEntry.message.includes('Completed templates')),
  ).toPromise();

  return builderRun;
}