Angular库依赖注入报NG0203错误：跨项目调用服务异常

问题场景 #

我在构建包含多个依赖注入（DI）服务的Angular库，并在独立Angular应用中使用这些服务时遇到问题，操作步骤如下：

• 创建独立的Angular应用和库项目：

  ng new app
  ng new libs --no-create-application
  cd libs
  ng g library test
  

• 基于生成的libs-lib.service.ts复制创建libs-lib2.service.ts：

  @Injectable({
    providedIn: 'root'
  })
  export class LibsLib2Service {
    constructor() { }
  }
  

• 修改原服务使其依赖新服务：

  @Injectable({
    providedIn: 'root'
  })
  export class LibsLibService {
    constructor(private lib: LibsLib2Service) { }
  }
  

• 构建库并通过npm link关联到应用：

  ng build libs-lib
  cd dist/libs
  npm link
  
  cd ../../../app/
  npm link libs-lib
  

• 在应用中创建测试服务，注入LibsLib2Service正常，但注入LibsLibService时出现错误：

  ERROR Error: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with 'EnvironmentInjector#runInContext'.
  

尝试将服务添加到模块providers中但未成功，请问哪里操作有误？

问题原因及解决办法 #

核心原因 #

这个NG0203错误本质是Angular库和应用加载了不同的Angular实例：通过npm link关联时，库会使用自身node_modules里的Angular，而应用用的是自己的，导致两个环境的注入上下文不共享，依赖链直接断裂。

具体修复步骤 #

1. 把库的Angular依赖设为peer依赖
   打开库项目的package.json，将@angular/core、@angular/common等Angular核心包移到peerDependencies下，避免库打包时内置重复的Angular代码：

   {
     "peerDependencies": {
       "@angular/common": "^16.0.0",
       "@angular/core": "^16.0.0"
     },
     "dependencies": {
       // 移除这里的Angular核心包
     }
   }
   

2. 让链接的库复用应用的Angular实例
   进入应用项目根目录，执行以下命令，强制库使用应用的Angular依赖：

   cd node_modules/@angular/core
   npm link
   cd ../..
   npm link @angular/core
   

   如果还有@angular/common等其他核心包冲突，重复上述操作。

3. 重新构建并重新链接
   回到库项目，清理旧构建产物后重新构建：

   ng build libs-lib --clean
   cd dist/libs
   npm link
   

   再回到应用项目，重新链接库：

   npm link libs-lib
   

4. 验证修复结果
   重启应用的开发服务器，再次注入LibsLibService，错误应该会消失。

额外注意点 #

• 不要手动在应用模块的providers数组中声明库的服务，你已经用了providedIn: 'root'，手动添加会导致重复提供，引发新问题。
• 如果用的是Angular 14+的独立组件，直接依赖库中root提供的服务即可，无需额外配置providers。

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