如何在Angular dev-server命令中集成代码生成流程？

场景与问题描述 #

当前使用@angular-devkit/build-angular:dev-server运行带热重载的Angular应用，核心配置如下：

"customServe": {
    "executor": "@angular-devkit/build-angular:dev-server",
    "configurations": {
        "production": {
            "buildTarget": "myProject:build:production"
        },
        "development": {
            "buildTarget": "myProject:build:development"
        }
    },
    "defaultConfiguration": "development"
}

需要实现的核心需求：每次构建（包括热重载触发的增量构建）前执行代码生成命令，生成的TypeScript文件能正常纳入编译流程，且不会触发额外的构建/服务循环。

已尝试方案的缺陷：

• 自定义顺序执行器run-sequentially仅在服务启动初期执行一次代码生成，热重载触发重建时不会重复执行
• 在build目标的dependsOn中添加generate-code，无法在每次热重载构建时触发代码生成

解决方案：无需修改Dev-Server，调整构建依赖与监听规则 #

完全可以基于现有dev-server实现需求，无需修改其源码，只需调整angular.json中的配置逻辑：

1. 给Build目标配置前置依赖 #

在项目的angular.json中，为build目标添加dependsOn字段，指定代码生成目标为前置执行项，同时确保代码生成工具的输出目录属于Angular的源码扫描范围（比如src/generated）：

"build": {
  "executor": "@angular-devkit/build-angular:browser",
  "dependsOn": ["generate-code"],
  // ... 其他build配置项
},
"generate-code": {
  "executor": "你的代码生成工具执行器",
  "options": {
    "outputDir": "src/generated"
  }
}

2. 给代码生成目标配置精准监听规则 #

为generate-code目标添加watch配置，仅监听触发代码生成的源文件（比如模板、配置文件），避免监听生成的TS文件，防止触发循环构建：

"generate-code": {
  "executor": "你的代码生成工具执行器",
  "options": {
    "outputDir": "src/generated"
  },
  "configurations": {
    "development": {
      "watch": true,
      "watchPaths": ["src/templates/**/*", "src/configs/**/*"]
    }
  }
}

3. 关联Dev-Server与带依赖的Build目标 #

确保dev-server的buildTarget指向上述配置好的build目标，同时保留默认的watch模式：

"customServe": {
  "executor": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "development": {
      "buildTarget": "myProject:build:development",
      "watch": true
    }
  },
  "defaultConfiguration": "development"
}

4. 核心逻辑说明 #

Angular的构建系统会自动追踪dependsOn目标的输出状态：

• 初始启动时，先执行generate-code，再执行build并启动dev-server
• 当监听的源文件变化时，会先触发generate-code重新生成文件，再触发build的增量编译
• 由于generate-code仅监听源文件，生成的TS文件不会反向触发代码生成，彻底避免循环

之前配置无效的原因 #

之前的dependsOn配置未生效，本质是没有给generate-code配置正确的watch规则，或者dev-server未关联带依赖的build目标的watch模式。当dev-server运行时，会启动build目标的watch进程，而build目标的dependsOn会在每次构建（包括增量构建）前检查依赖目标的输出是否过期，只要源文件变化，就会重新执行代码生成再编译。

内容的提问来源于stack exchange，提问作者F-H