Toastr implementation in Angular17 at standalone components

Question

I've been trying to add "toastr" to my Angular17 project but injecting it into my components does not work. I added it using AngularCLI.

I'm getting the next error:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_PDSLoginComponent])[InjectionToken ToastConfig -> InjectionToken ToastConfig -> InjectionToken ToastCo nfig -> InjectionToken ToastConfig]: NullInjectorError: No provider for InjectionToken ToastConfig!

Here's what my code contains:

import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ToastrService, ToastNoAnimation } from 'ngx-toastr';

@Component({
  selector: 'app-pdslogin',
  standalone: true,
  imports: [
    FormsModule
  ],
  providers: [
    { provide: ToastrService, useClass: ToastrService },
    { provide: ToastNoAnimation, useClass: ToastNoAnimation }
  ],
  templateUrl: './pdslogin.component.html',
  styleUrls: ['./pdslogin.component.css']
})
export class PDSLoginComponent {
  loginData = {
    UserId: ''
  };
  @Output() loginEvent = new EventEmitter();
  onLogin() {
    this.loginEvent.emit(this.loginData);
    this.toastr.info("SHOWING TOASTR!!!","Info");
  }
  constructor(private router: Router, private toastr: ToastrService) { }
}

I have tried searching for a solution in forums and questions here in Stack Overflow but all of them are for previous versions of Angular, now Angular17 uses the property "standalone", so then it requires to import and inject right to the component.

1. Something I tried is adding it as provider in my 'main.ts' file but as well, didn't work.

Answer 1

We need to use provideToastr and provideAnimations to add the services of the library to the environment providers (providers array of bootstrapApplication object as shown below), as mentioned in the documentation.

import { AppComponent } from './src/app.component';
import { provideAnimations } from '@angular/platform-browser/animations';

import { provideToastr } from 'ngx-toastr';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(), // required animations providers
    provideToastr(), // Toastr providers
  ]
});

Also we can remove the providers array values in the standalone component!

import { Component, Output, EventEmitter, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ToastrService, ToastNoAnimation } from 'ngx-toastr';

@Component({
  selector: 'app-pdslogin',
  standalone: true,
  imports: [
    FormsModule
  ],
  providers: [],
  templateUrl: './pdslogin.component.html',
  styleUrls: ['./pdslogin.component.css']
})
export class PDSLoginComponent {
  loginData = {
    UserId: ''
  };
  @Output() loginEvent = new EventEmitter();
  onLogin() {
    this.loginEvent.emit(this.loginData);
    this.toastr.info("SHOWING TOASTR!!!","Info");
  }
  constructor(private router: Router, private toastr: ToastrService) { }
}