排查NG0203错误：Angular库与HttpClient生产构建注入问题

问题描述 #

Angular应用依赖内部Angular库，库中服务注入了HttpClient，应用已配置HttpClientModule作为提供者。ng serve运行正常，但执行ng build生成生产构建包并启动后，出现NG0203注入错误。

复现步骤 #

• 构建库（libs目录）：ng build
• 启动应用（app1目录）：ng serve
• 生成生产构建包（app1目录）：ng build
• 用live server等工具启动构建包

当前已配置项 #

• tsconfig.json中paths配置："@angular/*": ["./node_modules/@angular/*"]
• angular.json中设置preserveSymlinks: true

解决方案 #

1. 修正库的依赖声明 #

在库的package.json中，将@angular/common和@angular/common/http标记为peerDependencies，确保库使用应用提供的Angular依赖实例，避免重复打包：

"peerDependencies": {
  "@angular/common": "^16.0.0",
  "@angular/core": "^16.0.0",
  "@angular/common/http": "^16.0.0"
}

2. 完善应用路径映射 #

在应用的tsconfig.json中，补充库的路径映射，确保编译时正确解析库文件：

"paths": {
  "@your-library-name/*": ["../libs/dist/your-library-name/*"],
  "@angular/*": ["./node_modules/@angular/*"]
}

替换@your-library-name为你的库的实际包名。

3. 优化生产构建配置 #

在应用的angular.json中，确保生产构建模式下启用preserveSymlinks：

"projects": {
  "app1": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }
}

4. 清理缓存后重新构建 #

执行以下命令彻底清理缓存，避免旧构建文件干扰：

# 清理Angular缓存
ng cache clean
# 删除库和应用的构建产物及依赖
rm -rf ../libs/dist node_modules dist
# 重新安装依赖
npm install
# 重新构建库和生产包
ng build --project your-library-name
ng build --configuration production

关键原理 #

NG0203错误本质是依赖重复实例化：生产构建的优化机制可能将库中的HttpClient解析为独立实例，而应用的注入器只识别自身提供的实例。通过peerDependencies强制共享依赖、配置路径映射和preserveSymlinks，确保库与应用使用同一个HttpClient实例，解决注入匹配问题。

内容的提问来源于stack exchange，提问作者Tomasz Jaworski