如何在其他项目中使用自定义Angular库服务？解决NG0203注入报错

在复用自定义Angular库中的服务时，遇到错误：ERROR Error: NG0203: inject() must be called from an injection context，相关代码示例如下：

库代码 #

库服务 #

import { HttpClient } from '@angular/common/http';
import { Injectable, Inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(http: HttpClient) {}
  // ...其他方法
}

库模块 #

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ApiService } from './services/api-utils.service';
import { ApiComponent } from './api.component';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    ApiComponent
  ],
  imports: [ 
    CommonModule ,
    HttpClientModule
  ],
  exports: [
    ApiComponent,
    HttpClientModule
  ],
  providers: [
    ApiService
  ]
})
export class ApiModule {}

应用代码 #

应用模块 #

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiModule } from 'api';

@NgModule({
  declarations: [
    // ...组件
  ],
  imports: [ 
    CommonModule,
    ApiModule,
    // ...其他模块
  ]
})
export class AppModule {}

解决方案 #

1. 移除重复的服务注册 #

你的ApiService已经通过@Injectable({ providedIn: 'root' })注册为根级单例服务，无需再在ApiModule的providers数组中声明。重复注册会导致注入上下文冲突，触发NG0203错误。修改后的ApiModule如下：

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ApiComponent } from './api.component';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    ApiComponent
  ],
  imports: [ 
    CommonModule ,
    HttpClientModule
  ],
  exports: [
    ApiComponent,
    HttpClientModule
  ]
  // 移除providers数组中的ApiService
})
export class ApiModule {}

2. 检查库的TypeScript配置 #

确保库的tsconfig.lib.json中compilerOptions包含以下配置，保证装饰器元数据正确生成：

{
  "compilerOptions": {
    // ...其他配置
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

3. 清理缓存并重新构建 #

执行以下命令清理缓存，重新构建库和应用：

# 清理Angular缓存
ng clean

# 重新构建库（本地开发场景）
ng build your-library-name

# 重新构建应用
ng build

4. 确认库的安装方式 #

如果是本地开发复用库，确保通过npm link正确关联；如果是发布到npm的库，确认已正确安装到应用中，版本匹配。

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