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?

Joselynjoseph

You probably have to provide the ToasterService in your root component, too! But not in all the sub components! :) – Snowber

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

Incorrigible

There is now a 5.0.0 release that enables toaster container inclusion outside of the root, as well as multiple containers while guaranteeing a singleton of the ToasterService. This corrects the behavior seen by the OP. – Dyna

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!

Selfsustaining