Angular本地npm库依赖环境服务触发NG0203注入错误

问题原因 #

当库中使用providedIn: 'root'的服务在属性初始化阶段直接调用inject()时，跨项目安装后，Angular的依赖注入上下文可能因模块解析顺序、编译配置差异，导致服务实例化时inject()不在合法的注入上下文中执行，触发NG0203错误。而同项目Demo因模块加载和上下文共享，不会出现该问题。

解决思路 #

1. 改用构造函数注入替代属性级inject()调用 #

将服务中直接在属性初始化时调用inject()的逻辑，迁移到构造函数中使用@Inject()装饰器注入，这是Angular依赖注入的标准时机，能确保注入上下文合法：

import { Injectable, Inject } from '@angular/core';
import { ENVIRONMENT_TOKEN, Environment } from './environment.token';

@Injectable({
  providedIn: 'root'
})
export class DummyService {
  private environment: Environment;

  constructor(@Inject(ENVIRONMENT_TOKEN) environment: Environment) {
    this.environment = environment;
  }

  log() {
    console.log(this.environment);
  }
}

2. 调整库的编译配置 #

在库项目的tsconfig.lib.json中，确保Angular编译选项设置为兼容跨项目的模式：

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "compilationMode": "partial",
    "strictInjectionParameters": true
  }
}

• compilationMode: "partial"：允许库在不同Angular项目中正确解析依赖注入，避免硬编码依赖关系。
• strictInjectionParameters：强制检查注入参数的合法性，提前发现配置问题。

同时在angular.json的库build配置中，确保禁用可能干扰注入的优化项：

"projects": {
  "dummy-library": {
    "architect": {
      "build": {
        "options": {
          "buildOptimizer": false,
          "preserveSymlinks": true
        }
      }
    }
  }
}

3. 确保消费项目的Token提供者配置在根上下文 #

在消费项目中，必须将ENVIRONMENT_TOKEN的提供者配置在根注入上下文（根模块或bootstrap配置中），确保服务初始化前Token已被注册：

传统NgModule项目：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ENVIRONMENT_TOKEN } from 'dummy-library';
import { environment } from './environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [
    { provide: ENVIRONMENT_TOKEN, useValue: environment }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

独立组件项目：

import { bootstrapApplication } from '@angular/platform-browser';
import { ENVIRONMENT_TOKEN } from 'dummy-library';
import { environment } from './environments/environment';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: ENVIRONMENT_TOKEN, useValue: environment }
  ]
});

4. 验证库的package.json导出配置 #

检查库的package.json中exports字段，确保public-api.ts对应的类型和模块文件被正确导出，避免消费项目导入路径错误：

"exports": {
  ".": {
    "types": "./public-api.d.ts",
    "esm2022": "./esm2022/dummy-library.mjs",
    "esm": "./esm2020/dummy-library.mjs",
    "main": "./bundles/dummy-library.umd.js"
  }
}

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