Angular 18中ng build --watch与npm link联动失效问题求助

我将Angular项目和依赖的本地库从17版本升级到18版本后，原本用ng build --watch搭配npm link实现的双向热重载功能失效了。目前库和项目都能正常编译，项目也能正确引用库，但修改库代码后，项目完全检测不到变更，无法自动触发热重载。

复现步骤 #

1. 创建主项目与库工作区：

ng new project
ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib

2. 启动库的监听构建：

cd projects/my-lib
ng build --watch

3. 建立本地链接并启动主项目：

# 在库的dist目录下执行
npm link
# 在主项目目录下执行
npm link my-lib
npm start

解决方案 #

方案1：调整ESBuild配置，监听链接依赖 #

Angular 18默认使用ESBuild作为构建工具，它的缓存机制会忽略npm link关联的外部依赖变更。需要在主项目的angular.json中修改构建配置：

• 找到projects -> project -> architect -> build -> options，添加ESBuild相关配置：

"esBuildOptions": {
  "cache": false,
  "watch": {
    "include": ["node_modules/my-lib/**/*"]
  }
}

• 同时在serve配置中添加监听规则：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "buildTarget": "project:build",
    "watch": {
      "include": ["node_modules/my-lib/**/*"]
    }
  }
}

修改完成后重启npm start，库代码变更就能触发项目热重载。

方案2：使用工作区关联模式替代npm link #

Angular 18推荐直接在同一工作区内管理项目和库，避免npm link的兼容性问题：

1. 将主项目移动到库工作区内：

mv ../project my-workspace/

2. 若工作区的angular.json未自动识别主项目，手动将主项目的配置添加到projects节点中。
3. 分别启动库的监听构建和主项目：

# 终端1：启动库的监听
ng build my-lib --watch
# 终端2：启动主项目
ng serve project

这种方式无需npm link，Angular会自动处理本地库的依赖关联与热重载，兼容性更强。

方案3：手动触发项目重载（临时调试用） #

如果不想修改配置，每次修改库代码后，在主项目目录下执行以下命令触发热重载：

touch src/main.ts

内容的提问来源于stack exchange，提问作者Donadio Axel