Skip to content
⚠️ This article was written in 2019. Some content may be outdated.

Angular 8 CLI Builders: Custom Build Pipelines and ng-add Solutions

Angular 8 has officially opened the Builders API, allowing the community to provide custom implementations for commands like ng build, ng test, and ng serve. This is also the foundation for many excellent tools such as @angular-builders/custom-webpack and @nrwl/workspace.

architect Configuration in angular.json

json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "sourceMap": false
            }
          }
        }
      }
    }
  }
}

Custom Builder

typescript
// builders/timestamp-copy/index.ts
import {
  createBuilder,
  BuilderOutput,
  BuilderContext,
} from "@angular-devkit/architect";
import * as fs from "fs";

export interface TimestampCopyOptions {
  sourceDir: string;
  targetDir: string;
}

export default createBuilder<TimestampCopyOptions>(
  async (options, context): Promise<BuilderOutput> => {
    context.logger.info(
      `Copying: ${options.sourceDir} -> ${options.targetDir}`,
    );
    try {
      const timestamp = new Date().toISOString();
      const files = fs.readdirSync(options.sourceDir);
      if (!fs.existsSync(options.targetDir))
        fs.mkdirSync(options.targetDir, { recursive: true });
      files.forEach((file) => {
        fs.copyFileSync(
          `${options.sourceDir}/${file}`,
          `${options.targetDir}/${timestamp}-${file}`,
        );
      });
      return { success: true };
    } catch (e) {
      return { success: false, error: e.message };
    }
  },
);
json
// builders.json
{
  "builders": {
    "timestamp-copy": {
      "implementation": "./index",
      "schema": "./schema.json",
      "description": "Copy files with timestamp prefix"
    }
  }
}

The Builders API makes it possible to deeply customize Angular's build pipeline without forking the framework — a powerful extension point for teams with advanced build requirements.

MIT Licensed