angular2 toaster - No Toaster Containers have been initialized to receive toasts

Question

i am using angular2-toaster in my angular app

it is very simple,

you define toaster container in the template of component

<toaster-container></toaster-container>

and you use toasterService of type ToasterService to pop op toaster

  this.toasterService.pop('success', 'Args Title', 'Args Body');

but there is a problem with this approach, I would not like to define a container in every component I intend to pop a toaster, I would like to define it once in root component. where application bootstrap but when I do so, I get the error

 No Toaster Containers have been initialized to receive toasts.

any solution?

Answer 1

Put <toaster-container></toaster-container> in the root component view. Then inject the ToasterService in each of other components. You will still be able to do:

  this.toasterService.pop('success', 'Args Title', 'Args Body');

And don't forget to provide ToastService at module level.

DEMO

Answer 2

In my case, the import path wasn't correct. I faced this issue while I was upgrading the angular version from 6 to 10 and I updated the angular2-toaster from 7.0.0 to 8.0.0

Changed it from,

import {ToasterConfig, ToasterService} from "angular2-toaster/angular2-toaster"; // Wrong

to,

import {ToasterConfig, ToasterService} from "angular2-toaster"; // Correct

Hope it helps someone who's seeking!