NullInjectorError: R3InjectorError[ToastrService -> ToastrService -> InjectionToken ToastConfig -> InjectionToken ToastConfig]:

Question

I am stuck in add ngx-toastr in angular standalone micro-frontend in angualr 16. when i add the ngx-toastr provideToast() in main Module component. Please check the below screenshot:

Thanks

enter image description here

Hello,I am stuck in add ngx-toastr in angular standalone micro-frontend in angualr 16. when i add the ngx-toastr provideToast() in main Module component. Please check the below screenshot:

Thanks

enter image description here

Answer 1

Here is a working example for you to reference.

Please go through the Getting Started on Their github page.

Steps I followed.

1. Install toaster npm install ngx-toastr --save, install npm install @angular/animations --save if needed
2. copy paste the below lines to global styles.scss

scss

// regular style toast
@import 'ngx-toastr/toastr';

// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
@import 'ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
// bootstrap 4
@import 'ngx-toastr/toastr-bs4-alert';
// boostrap 5
@import 'ngx-toastr/toastr-bs5-alert';

---

or

angular.json

add the styles array the toaster css

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

3. Add the code for opening the toastr

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { provideToastr } from 'ngx-toastr';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="showSuccess()">
      open toaster
    </button>
  `,
})
export class App {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

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

Stackblitz Demo