Angular独立组件移至npm库后inject调用失败问题咨询

核心原因 #

这个错误本质是Angular核心包的双实例冲突：你的npm库和主应用各自加载了独立的@angular/core副本，导致库中的inject()调用无法识别主应用的注入上下文——两个副本的注入系统完全隔离，即使代码写法完全正确，也会触发NG0203错误。

具体解决方案 #

1. 修正库的依赖配置 #

将库中@angular/core、@angular/common等Angular核心依赖从dependencies移到peerDependencies，强制主应用提供唯一的Angular核心包实例：

// 库的package.json
{
  "name": "your-person-library",
  "peerDependencies": {
    "@angular/core": "^16.0.0 || ^17.0.0",
    "@angular/common": "^16.0.0 || ^17.0.0"
  },
  "dependencies": {
    // 仅保留非Angular的第三方依赖，如业务无关的工具库
  }
}

修改后，删除库的node_modules和锁文件（package-lock.json/yarn.lock），重新安装依赖并打包库。

2. 解决开发调试的双实例问题 #

如果通过npm link/yarn link本地调试库，容易触发双实例冲突，可采用以下方法：

• 在主应用的angular.json中添加preserveSymlinks: true：

  // 主应用angular.json -> projects -> [你的应用名] -> architect -> build -> options
  "options": {
    "preserveSymlinks": true,
    // 其他原有配置
  }
  

• 或者直接使用本地路径依赖替代链接：在主应用package.json中设置"your-person-library": "file:../path-to-your-library"，再重新安装依赖。

3. 验证打包产物 #

用ng-packagr打包库后，检查产物的package.json，确认Angular核心依赖仍在peerDependencies中，且打包代码未包含@angular/core的源码。

额外检查 #

确保你的独立组件已正确开启standalone模式：

@Component({
  standalone: true, // 必须显式设置
  selector: 'your-standalone-comp',
  // 其他配置：templateUrl、styles等
})
export class StandaloneComponent {
  readonly #config = inject(PERSON_DEFAULT_OPTIONS, {optional: true});
}

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