如何解决 Angular 10 primeng NullInjectorError：没有 ConfirmationService 的提供者？答案

【问题标题】：How to resolve Angular 10 primeng NullInjectorError: No provider for ConfirmationService?如何解决 Angular 10 primeng NullInjectorError：没有 ConfirmationService 的提供者？
【发布时间】：2020-08-26 14:06:48
【问题描述】：

我正在使用primeng confirmDialog，它在我的Angular 10项目中需要confirmationService，但localhost:4200没有显示任何内容，并且我在Chrome控制台中收到以下错误。

ERROR NullInjectorError: R3InjectorError(AppModule)[ConfirmationService -> ConfirmationService -> ConfirmationService]: 
NullInjectorError: No provider for ConfirmationService!
  at NullInjector.get (http://localhost:4200/vendor.js:27059:27)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at R3Injector.get (http://localhost:4200/vendor.js:37225:33)
  at NgModuleRef$1.get (http://localhost:4200/vendor.js:50342:33)
  at Object.get (http://localhost:4200/vendor.js:48245:35)
  at getOrCreateInjectable (http://localhost:4200/vendor.js:30065:39)
  at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:39896:12)
  at NodeInjectorFactory.AppComponent_Factory [as factory] (http://localhost:4200/main.js:158:150)
  at getNodeInjectable (http://localhost:4200/vendor.js:30173:44)

这是我的 app.component.ts。

import { Component } from '@angular/core';
import { ConfirmationService } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
  title = 'angular-tuts';

  constructor(private confirmationService: ConfirmationService) { }

  confirm() {
    this.confirmationService.confirm({
      message: 'Are you sure that you want to perform this action?',
      accept: () => {

      }
    });
  }

}

这里是 app.component.html

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>

<button type="text" (click)="confirm()" pButton icon="pi pi-check" label="Confirm"></button>

谢谢

【问题讨论】：

您需要在组件的module的providers列表中添加服务
@akash 成功了，非常感谢

标签： angular primeng primeng-dialog

【解决方案1】：

问题已通过导入 ConfirmationService 然后将其添加到 app.module.ts 的提供程序列表中得到解决，正如@akash 评论所说：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { from } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { CoreModule } from '../app/core/core.module';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    TabletestComponent,
    TableComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    CoreModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    TableModule,
    HttpClientModule,
    ConfirmDialogModule

  ],
  providers: [ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：