NullInjectorError: No provider for ***!
是 Angular 框架中常见的错误之一,通常发生在依赖注入(Dependency Injection, DI)过程中。这个错误提示表明 Angular 无法找到某个服务的提供者。
依赖注入(DI):Angular 的依赖注入系统允许组件和服务从容器中获取它们的依赖项。这个系统通过提供者(providers)来注册和获取依赖项。
providers
数组中。确保在 @NgModule
装饰器的 providers
数组中声明服务。
import { NgModule } from '@angular/core';
import { MyService } from './my.service';
@NgModule({
declarations: [
// 组件声明
],
imports: [
// 模块导入
],
providers: [MyService], // 声明服务提供者
bootstrap: [AppComponent]
})
export class AppModule { }
如果服务仅在某个组件中使用,可以在组件的 @Component
装饰器的 providers
数组中声明。
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
providers: [MyService] // 在组件级别声明服务提供者
})
export class MyComponent {
constructor(private myService: MyService) {}
}
确保包含服务提供者的模块已经正确导入到需要使用该服务的模块中。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyModule } from './my.module';
@NgModule({
declarations: [
// 组件声明
],
imports: [
CommonModule,
MyModule // 导入包含服务提供者的模块
],
exports: [
MyModule
]
})
export class AnotherModule { }
假设有一个 MyService
服务:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // 在根模块中自动提供
})
export class MyService {
getData() {
return 'Hello, World!';
}
}
在组件中使用该服务:
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
constructor(private myService: MyService) {}
ngOnInit() {
console.log(this.myService.getData());
}
}
通过以上方法,可以有效解决 NullInjectorError: No provider for ***!
错误。
领取专属 10元无门槛券
手把手带您无忧上云