Angular 15独立组件能否封装为npm库？注入错误如何解决？

独立组件完全可以封装成Angular库，不需要依赖NgModule，但要注意几个关键配置和代码细节，才能解决你遇到的inject()必须在注入上下文中调用错误：

1. 调整库的tsconfig.lib.json配置 #

• 确保compilerOptions中的emitDecoratorMetadata设为true，Angular需要这个元数据来解析注入逻辑
• 确认angularCompilerOptions里enableIvy为true（Angular 15默认启用Ivy，但库模式下显式指定更稳妥）

2. 规范组件内的注入写法 #

你的PERSON_DEFAULT_OPTIONS注入令牌触发错误，大概率是注入逻辑不在合法的注入上下文内，要按以下方式写：

• 构造函数注入：直接在组件构造函数中声明依赖，组件本身的@Component装饰器会确保注入上下文有效：

  @Component({
    selector: 'app-person',
    standalone: true,
    template: `...`
  })
  export class PersonComponent {
    constructor(@Inject(PERSON_DEFAULT_OPTIONS) private options: PersonOptions) {}
  }
  

• inject()函数调用：必须在构造函数、Angular 14+支持的生命周期钩子（如ngOnInit）或工厂函数内调用，不能在类顶层或普通函数中执行：

  @Component({
    selector: 'app-person',
    standalone: true,
    template: `...`
  })
  export class PersonComponent {
    private options = inject(PERSON_DEFAULT_OPTIONS); // 构造函数阶段执行，合法
  
    ngOnInit() {
      const opts = inject(PERSON_DEFAULT_OPTIONS); // 生命周期钩子内，合法
    }
  }
  

3. 正确导出库的公共API #

在public-api.ts中，不仅要导出独立组件，还要导出对应的注入令牌和类型，确保消费应用能正确引用并提供令牌：

export { PersonComponent } from './lib/person.component';
export { PERSON_DEFAULT_OPTIONS, PersonOptions } from './lib/person-options';

4. 消费应用的令牌提供方式 #

确保在应用的根注入器中提供令牌，比如main.ts的bootstrapApplication配置里，不要只在某个NgModule中提供（独立组件不依赖模块）：

bootstrapApplication(AppComponent, {
  providers: [
    { provide: PERSON_DEFAULT_OPTIONS, useValue: { name: '默认名称', age: 18 } }
  ]
});

5. 清理缓存重新编译 #

如果以上配置都正确仍有问题，尝试：

• 执行npm ci清理并重新安装依赖
• 运行ng build --clean强制清理编译缓存后重新构建库

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