Angular 11/12如何手动运行ngcc解决并行构建冲突问题

问题根源说明 #

• ngcc 是 Angular 编译器配套的 Ivy 兼容性转换工具，归属 @angular/compiler-cli 包，并不包含在全局 @angular/cli 安装包中，因此直接执行全局 ngcc 命令会提示找不到。
• 并行执行 ng build 时每个构建任务都会自动触发 ngcc 运行，ngcc 自带锁机制防止多进程冲突，因此会抛出已存在运行进程的报错。

具体操作步骤 #

1. 调用项目本地的 ngcc 命令 #

不用额外全局安装依赖，直接使用项目 node_modules 中自带的 ngcc 即可，有两种调用方式：

• 使用 npx 调用：npx ngcc [参数]
• 直接调用二进制文件：./node_modules/.bin/ngcc [参数]

注意：必须使用项目本地的 ngcc 版本，当前项目为 Angular 11，和全局安装的 Angular CLI 12 版本不兼容，使用全局版本会出现兼容问题。

2. 配置适合 monorepo 的 ngcc 执行参数 #

推荐执行的标准命令如下，可覆盖绝大多数业务场景的 Ivy 转换需求：

ngcc --properties esm2015 browser module main --first-only --create-ivy-entry-points

你也可以将该命令配置到 package.json 的脚本中，方便调用：

{
  "scripts": {
    "postinstall": "ngcc --properties esm2015 browser module main --first-only --create-ivy-entry-points"
  }
}

配置后执行 npm run postinstall 即可触发 ngcc 运行，也可以设置为 install 钩子，依赖安装完成后自动执行。

3. 调整流水线执行逻辑 #

将流水线的执行顺序调整为：

1. 拉取代码，执行依赖安装（npm install / yarn install）
2. 执行一次完整的 ngcc 命令，等待执行完成
3. 启动多个并行的 ng build 任务

此时所有依赖的 Ivy 转换已经提前完成，后续构建任务不会再触发 ngcc 运行，不会出现锁冲突报错。

可选：异常锁清理 #

如果之前有构建任务异常中断导致锁文件残留，可以在执行 ngcc 前先删除锁文件，避免不必要的报错：

rm -f ./node_modules/@angular/compiler-cli/ngcc/__ngcc_lock_file__

内容的提问来源于stack exchange，提问作者Felipe Centeno