How to resolve Angular 10 primeng NullInjectorError: No provider for ConfirmationService?

Question

I am using primeng confirmDialog which required the confirmationService in my Angular 10 project but nothing is shown at localhost:4200 and I got the following error in Chrome console.

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)

Here is my 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: () => {

      }
    });
  }

}

Here is the 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>

Thanks

Atlee

You need to add the service in the providers list in your component's module – Dank

@akash it worked, thank you very much – Atlee

Answer 1

The problem has been solved by importing the ConfirmationService then adding it in the providers list in app.module.ts as @akash comment says:

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 { }

Atlee

Answer 2

Another solution is you can add the provider in the component as below:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[ConfirmationService]
})
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: () => {

      }
    });
  }

}

Justle

Answer 3

If you have angular 17+. then add the ConfirmationService in provider array of app.config.ts file.

   export const appConfig: ApplicationConfig = {
          providers: [
            provideRouter(routes), 
            provideHttpClient(), 
            MessageService, 
            ConfirmationService,
            importProvidersFrom([BrowserAnimationsModule]) ], 
        };

Butyl