如果移动到 npm 库，独立组件的注入会失败

Question

我创建了一个简单的角度独立组件，它使用注入令牌进行配置：

export const PERSON_DEFAULT_OPTIONS = new InjectionToken<IPersonDefaults>('...')

export interface IPersonDefaults { ... }

export const providePersonDefaultOptions = (options: IPersonDefaults): Provider => ({
    provide: PERSON_DEFAULT_OPTIONS,
    useValue: options
})

@Component({...})
export class StandaloneComponent {
   readonly #config = inject(PERSON_DEFAULT_OPTIONS, {optional: true})
}

然后，在我的 main.ts 中，我只需调用providePersonDefaultOptions()我的价值观，一切都会很好。

现在我已经将该令牌/接口/组件放入 npm 库中。当我尝试再次运行该应用程序时，出现以下错误：

错误：NG0203：inject() 必须从注入上下文调用，例如构造函数、工厂函数、字段初始值设定项或使用的函数EnvironmentInjector#runInContext

我不明白为什么该代码不能作为 npm 库工作，因为它仍然是一个正在设置的字段初始值设定项。

Answer 1

发生此错误的原因可能是

1: 2 @angular/core 最终出现在捆绑应用程序中

原因是两个独立的工作区都有自己的 @angular/core 包，并且最终都在捆绑的应用程序中。Angular 运行时将其状态保存在该模块私有的顶级模块变量中，但是如果该模块出现两次（来自 @angular/core 的两个实例），您会遇到状态仅在一个实例中正确初始化的情况，不是另一个。在这种情况下，注入上下文仅在“主要”运行时可用，但从“辅助”库部分捆绑的应用程序部分将取决于“辅助”运行时状态。-乔斯特K

我的问题

我有 3 个图书馆a，b并且 c.
a和b两者都导入c，但a使用的版本不同b。一个在角度 14 下，另一个在角度 16 下。

这使得它使用2种不同的@angular/core

解决方案

我已经更新了库的每个版本以使用完全相同的版本。

2：旧es目标

如果您要迁移到 Angular v16，您可能需要将目标更改为ES2022

// tsconfig.json

"compilerOptions": {
  "lib": ["ES2022", "dom"],
  "module": "ES2022",
  "target": "ES2022",
}