NullInjectorError：未捕获的承诺错误

当应用程序在注入器中找不到所需的提供商时，就会出现 NullInjectorError 错误。这通常是由不正确的依赖注入配置引起的。

常见原因

以下是可能导致出现 NullInjectorError 错误的常见原因：

• 忘记向提供商数组中添加服务。
• 忘记将提供商添加到 @NgModule 的 providers 数组中。
• 配置错误的依赖注入标识符。

如何解决

以下是解决 NullInjectorError 错误的一些步骤：

1. 检查你的服务是否在 providers 数组中注册。

例如，如果你有一个名为 MyService 的服务，那么你应该像下面这样在你的模块中编写：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyService } from './my.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [MyService],  // 注册 MyService 服务
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 检查 @Injectable 或 @Directive 装饰器是否添加到服务类中。

例如，如果你的服务类如下所示：

export class MyService {
  constructor() {}
}

那么你需要添加 @Injectable 装饰器，像这样：

@Injectable()
export class MyService {
  constructor() {}
}

3. 如果你使用了自定义依赖注入标识符，则确保它们正确匹配。

例如，如果你的依赖注入标识符如下：

import { InjectionToken } from '@angular/core';

export const MY_TOKEN = new InjectionToken<string>('my token');

那么你需要在提供商数组中像这样使用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MY_TOKEN } from './my-token';
import { MyService } from './my.service';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [{ provide: MY_TOKEN, useValue: 'my value' }, MyService],  // 正确使用 MY_TOKEN
  bootstrap: [AppComponent],
})
export class AppModule {}

以上是一些解决 NullInjectorError 错误的方法。然而，这只是一个起点。如有必要，请查看更多文档，调试代码并思考自己的应用程序的结构是否正确。