Angular报NullInjectorError: No provider for Number错误如何解决？

错误本质 #

该报错由Angular依赖注入逻辑触发：你在某个可注入类（组件、服务、指令等）的构造函数中声明了Number类型的参数，Angular会默认尝试从注入容器中查找该类型的对应实例进行注入，由于你未注册Number对应的提供商，因此运行时抛出该错误。

TypeScript编译器不会抛出该错误，因为仅从TS语法层面，构造函数声明Number类型参数是完全合法的，只有Angular运行时执行依赖注入时才会检测到提供商缺失的问题。

排查解决步骤 #

• 全局搜索项目所有构造函数的参数列表，找到标注为Number/number类型的参数，通常错误写法如下：

// 错误示例：将基础类型参数直接放在构造函数中，Angular会默认识别为待注入依赖
export class TestComponent {
  constructor(private pageSize: number) {}
}

• 若该参数确实需要从依赖注入获取：使用InjectionToken定义注入令牌，注册对应提供商即可

// 1. 定义注入令牌
export const PAGE_SIZE_TOKEN = new InjectionToken<number>('page-size');

// 2. 在对应模块/组件的providers数组中注册提供商
@NgModule({
  imports: [/* ... */],
  declarations: [/* ... */],
  providers: [
    { provide: PAGE_SIZE_TOKEN, useValue: 20 }
  ]
})
export class AppModule {}

// 3. 在构造函数中通过@Inject指定令牌注入
export class TestComponent {
  constructor(@Inject(PAGE_SIZE_TOKEN) private pageSize: number) {}
}

• 若该参数只是类的普通属性，不需要注入：直接将属性声明移到构造函数外部即可

export class TestComponent {
  // 普通属性直接在类内部声明，不要放入构造函数参数列表
  private pageSize: number = 20;
  constructor() {}
}

错误截图 #

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