Angular 5 NullInjectorError：没有 n 的提供者

Angular 5 NullInjectorError: 没有 n 的提供者

在使用Angular 5进行开发时，有时我们会遇到一个名为NullInjectorError的错误。这个错误的原因是我们没有为某个服务或依赖项提供一个提供者。本文将介绍NullInjectorError错误的原因，并提供一些解决方法。

什么是NullInjectorError错误？

NullInjectorError错误是Angular框架中的一个常见错误。它表示我们没有为某个依赖项提供一个提供者，导致依赖项无法被解析和注入。这通常是由于我们忘记在模块的providers数组中添加相应的提供者所致。

案例代码

让我们来看一个简单的示例代码，以更好地理解NullInjectorError错误。

首先，我们定义一个名为UserService的服务：

import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
  getUsers() {
    return ['User A', 'User B', 'User C'];
  }
}

然后，我们创建一个名为UserListComponent的组件，并依赖于UserService：

import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
  selector: 'app-user-list',
  template: <code>
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users">{{ user }}</li>
    </ul>
  </code>,
  providers: [UserService] // 忘记添加UserService的提供者
})
export class UserListComponent {
  users: string[];
  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

在上述代码中，我们忘记在UserListComponent的providers数组中添加UserService的提供者。这将导致NullInjectorError错误。

解决方法

为了解决NullInjectorError错误，我们需要在模块或组件的providers数组中添加相应的提供者。在我们的示例代码中，我们应该在UserListComponent的providers数组中添加UserService的提供者。

import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
  selector: 'app-user-list',
  template: <code>
    <h2>User List</h2>
    <ul>
      <li *ngFor="let user of users">{{ user }}</li>
    </ul>
  </code>,
  providers: [UserService] // 添加UserService的提供者
})
export class UserListComponent {
  users: string[];
  constructor(private userService: UserService) {
    this.users = this.userService.getUsers();
  }
}

现在，当我们再次运行应用程序时，NullInjectorError错误将不再出现。

NullInjectorError错误是由于我们没有为某个依赖项提供一个提供者而引起的。为了解决这个错误，我们需要确保在模块或组件的providers数组中添加相应的提供者。通过这样做，我们可以成功解析和注入依赖项，从而避免NullInjectorError错误的发生。

希望本文能帮助您理解NullInjectorError错误以及如何解决它。在开发Angular应用程序时遇到类似错误时，请记得检查您的提供者是否正确配置。