如何动态构建Angular项目的angular.json配置文件？

关于能否原生使用angular.js替代angular.json #

Angular CLI目前不支持直接用.js或.ts文件替代angular.json作为配置文件，官方仅认可JSON格式的工作区配置，没有原生支持动态脚本配置的机制。

更优雅的替代方案 #

1. 官方配置继承：利用extends字段减少重复代码 #

这是解决配置重复最直接的官方方案，通过extends字段引入外部基础配置文件，实现公共配置复用：

• 创建base-config.json，存放通用配置（比如公共的fileReplacements、assets、styles等）：

{
  "projects": {
    "base": {
      "architect": {
        "build": {
          "options": {
            "assets": ["src/assets", "src/favicon.ico"],
            "fileReplacements": []
          }
        }
      }
    }
  }
}

• 在项目的angular.json中继承基础配置：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "extends": "./base-config.json",
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          // 仅编写当前项目特有的配置，公共配置自动继承
          "options": {
            "outputPath": "dist/your-app"
          }
        }
      }
    }
  }
}

这种方式无需额外脚本，完全基于官方机制，维护成本低，修改基础配置后CLI会自动触发重建。

2. 增强版TS脚本生成：解决类型提示与自动重建问题 #

针对现有TS脚本的不足，可通过以下方式优化：

• 添加TypeScript类型提示：引入Angular CLI内置的配置类型，实现完整的类型校验与提示：

import type { WorkspaceSchema } from '@angular/cli/lib/config/schema';
import fs from 'fs';

// 类型化的配置对象
const config: WorkspaceSchema = {
  $schema: "./node_modules/@angular/cli/lib/config/schema.json",
  version: 1,
  projects: {
    // 你的动态配置逻辑
  }
};

// 生成angular.json
fs.writeFileSync('./angular.json', JSON.stringify(config, null, 2));

• 自动监听配置变更并重建：使用chokidar监听配置脚本的变化，自动重新生成angular.json，Angular CLI会自动识别angular.json的变更并触发重建：

import chokidar from 'chokidar';
import { generateConfig } from './config-generator';

// 初始生成配置
generateConfig();

// 监听配置脚本文件变化
chokidar.watch('./config-generator.ts').on('change', () => {
  generateConfig();
  console.log('angular.json已更新，CLI将自动重建');
});

在package.json中添加启动脚本：

{
  "scripts": {
    "start": "ts-node ./watch-config.ts & ng serve",
    "build": "ts-node ./config-generator.ts && ng build"
  }
}

3. 自定义Angular CLI Builder：动态处理构建配置 #

如果需要复杂的动态配置逻辑，可以自定义CLI Builder，在构建阶段动态调整配置，无需预先生成angular.json：

• 创建自定义Builder，继承默认的@angular-devkit/build-angular:browser builder，在构建前动态修改配置：

import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
import { BrowserBuilderSchema } from '@angular-devkit/build-angular';
import { executeBrowserBuilder } from '@angular-devkit/build-angular/src/builders/browser';

export default createBuilder(async (options: BrowserBuilderSchema, context: BuilderContext): Promise<BuilderOutput> => {
  // 动态修改配置，比如根据环境添加fileReplacements
  options.fileReplacements = options.fileReplacements || [];
  if (context.target?.configuration === 'production') {
    options.fileReplacements.push({
      replace: 'src/environments/environment.ts',
      with: 'src/environments/environment.prod.ts'
    });
  }

  // 执行默认的browser构建逻辑
  return executeBrowserBuilder(options, context);
});

• 在angular.json中引用自定义Builder：

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "builder": "./custom-builders:dynamic-browser",
          "options": {
            // 基础配置
          }
        }
      }
    }
  }
}

这种方式用TypeScript编写配置逻辑，有完整的类型提示，修改Builder代码后，Angular CLI会自动重载并触发重建。

内容的提问来源于stack exchange，提问作者Harry Burns