Angular报错求助：NullInjectorError: No provider for MedicalDataComponent

错误信息 #

ERROR Error: StaticInjectorError(AppModule)[ClinicalInformationComponent -> 
MedicalDataComponent]: 
StaticInjectorError(Platform: core)[ClinicalInformationComponent -> 
MedicalDataComponent]: 
NullInjectorError: No provider for MedicalDataComponent!

问题分析 #

这个错误说明ClinicalInformationComponent的构造函数中尝试注入MedicalDataComponent，但Angular无法找到它的提供者。组件不能作为依赖被注入，只能通过模板标签声明使用；同时你的模块配置也存在错误。

解决方案 #

1. 修正BotAnalysisModule的providers配置 #

模块不需要放在providers数组中（providers仅用于注册服务），你已经在imports中导入了MedicalDataModule，直接移除providers里的模块引用：

import { NgModule } from '@angular/core';
import { BotAnalysisComponent } from './bot.component';
import { MedicalDataModule } from './medical-data.module';

@NgModule({
  imports: [
    MedicalDataModule
  ],
  declarations: [BotAnalysisComponent],
  providers: [] // 移除错误的FileUploadModule和MedicalDataModule引用
})
export class BotAnalysisModule { }  

2. 移除ClinicalInformationComponent中对MedicalDataComponent的注入 #

打开ClinicalInformationComponent的代码，找到构造函数中类似下面的注入代码并删除：

// 错误写法，立即删除
constructor(private medicalDataComponent: MedicalDataComponent) {}

如果需要使用MedicalDataComponent，在ClinicalInformationComponent的模板中添加组件标签（假设MedicalDataComponent的选择器是app-medical-data）：

<!-- 在ClinicalInformationComponent的模板中使用组件 -->
<app-medical-data></app-medical-data>

3. 完善MedicalDataModule的配置 #

• 必须导入CommonModule：组件模板要使用ngIf、ngFor等内置指令，需要依赖这个模块
• 如果MedicalDataComponent需要在其他模块的模板中使用，把它加入exports数组

修改后的MedicalDataModule：

import { CommonModule } from '@angular/common';
import { MedicalDataComponent } from './medical-data.component';
import { MedicalDataRoutingModule } from './medical-data-routing.module';
import { ClinicalInformationComponent } from './clinical-information/clinical-information.component';
import { NgxPaginationModule } from 'ngx-pagination';

@NgModule({
  imports: [
    CommonModule,
    NgxPaginationModule,
    MedicalDataRoutingModule
  ],
  declarations: [
    ClinicalInformationComponent,
    MedicalDataComponent
  ],
  providers:[],
  exports:[ClinicalInformationComponent, MedicalDataComponent] // 按需导出组件
})
export class MedicalDataModule { }

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