Angular 18中NullInjectError：No provider for c_!错误解决求助

问题根源分析 #

你的AppModule配置存在几个明显错误，这些是导致服务注入失败的核心原因：

• 组件/模块错误放入providers数组：SalesUnitOverviewComponent、SalesBookingDetailsComponent属于组件，应仅在declarations中声明；HttpClientModule是模块，只能在imports中引入，不能作为服务提供者。另外HttpClient无需手动添加到providers，HttpClientModule会自动提供该服务。
• 全局错误配置MatDialog依赖：全局提供MAT_DIALOG_DATA和MatDialogRef的空值，会导致所有对话框组件注入这两个依赖时拿到无效值，这完全不符合Angular对话框的设计逻辑。

修正后的AppModule代码 #

import {
  NgxMatDatetimePickerModule, 
  NgxMatNativeDateModule, 
  NgxMatTimepickerModule 
} from '@angular-material-components/datetime-picker';


@NgModule({
  declarations: [
    AppComponent,
    SalesUnitOverviewComponent,
    SalesBookingDetailsComponent,
    NgbdDatepickerRange,
  ],

  // Angular 9+ 无需手动配置entryComponents，框架会自动处理动态组件
  // entryComponents: [SalesBookingDetailsComponent],
  
  imports: [
    NgxMatDatetimePickerModule,
    MatTabsModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule,
    BrowserModule,
    MatDialogModule,    
    MatFormFieldModule,
    MatDatepickerModule,
    MatToolbarModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatDividerModule,
    MatSelectModule,
    ReactiveFormsModule,
    HttpClientModule,
    MatProgressSpinnerModule,
    NgbModule,  
    AppRoutingModule,
    MatCheckboxModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatCardModule   
  ],
  providers: [
    SalesUnitOverviewService, 
    PaginationService
    // 移除所有错误添加的组件、模块及全局对话框依赖
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

对话框组件的正确注入方式 #

如果SalesBookingDetailsComponent作为对话框组件使用，需在组件内部正确注入依赖，并在打开对话框时传递数据：

1. 对话框组件构造函数注入

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

export class SalesBookingDetailsComponent {
  constructor(
    public dialogRef: MatDialogRef<SalesBookingDetailsComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) { }
}

2. 打开对话框时传递数据

import { MatDialog } from '@angular/material/dialog';

// 在调用对话框的组件中
constructor(private dialog: MatDialog) {}

openBookingDetailsDialog() {
  const dialogRef = this.dialog.open(SalesBookingDetailsComponent, {
    data: { /* 这里传入你的业务数据 */ }
  });
}

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