No Toaster Containers have been initialized to receive toasts

Question

I am working with angular2 toaster in angular2 application. on application start i am getting below error .

my app_module is below :

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
import { ToasterModule, ToasterService} from 'angular2-toaster';
import { AppComponent }   from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpModule,   
        ToasterModule
    ],
    declarations: [AppComponent, HomeComponent, 
        CategoryListComponent, ConsultSotiComponent,
        HeaderComponent, FooterComponent],
    providers: [CategoryListService, LeadService, 
        LookUpDetailsService, CompanyService, ConsultSotiService, ToasterService],
    bootstrap: [AppComponent]
})

export class AppModule { }

and i have bootstrap this module also.

My app.component is below:

import { Component } from '@angular/core';
import {  OnInit } from '@angular/core';
import { TranslateService } from './translate/translate.service';
import { ToasterService} from 'angular2-toaster';
@Component({
    selector: 'mp-app',      
    providers: [ToasterService],  
    template: `<div>
            <toaster-container [toasterconfig]="config1"></toaster-container>
            <button (click)="popToast()">pop toast</button><br/>
        </div>`

})

export class AppComponent implements OnInit {
    title = 'Enterprise MarketPlace';
    public translatedText: string;
    public supportedLanguages: any[];

    constructor(private _translate: TranslateService, private toasterService: ToasterService) {
        this.popToast();
    }

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

This results in a No Toaster Containers have been initialized to receive toasts error.

Use this [**answer**](http://stackoverflow.com/questions/42235540/plain-javascript-as-angular-2-service/42235817#42235817) instead of a module unnecessarily — Aravind, Mar 05 '17 at 06:42

San · Answer 1 · 2018-03-26T18:32:53.243

8

I faced similar issue. I just did not add toaster container in template. Check if you have added toaster component in template properly.

<toaster-container [toasterconfig]="toasterconfig"></toaster-container>

Update Angular5-Toaster 5.0.0

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

edited Mar 26 '18 at 18:32

answered Mar 05 '17 at 06:39

San

427
3
12

1

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 – David L Feb 24 '18 at 16:50

score 0 · Answer 2 · answered Jan 25 '17 at 01:17

I had the same error and I solved it like this: First of all create the component in a separate TS :

import {NgModule, Component} from '@angular/core';
import {ToasterModule, ToasterService} from 'angular2-toaster';
//import {Root} from './root.component'

@NgModule({
    imports: [ToasterModule],
    declarations: [toastComponent],
    providers: [],
    bootstrap: [toastComponent]
})

@Component({
    selector: 'root',
    template: `
            <toaster-container></toaster-container>
            <button (click)="popToast()">pop toast</button>`
})

export class toastComponent {
    private toasterService: ToasterService;

    constructor(toasterService: ToasterService) {
        this.toasterService = toasterService;
    }

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

after that, import in your .module, in the declaration part the toastComponent, thats all, you can put in your HTML the tag remember this is the selector toastrcomponent.... you have an error, because you have not initializate the toastr component, so follow my steps and will works

this will not work and throw compile error coz of multiple declaration of variable **toasterService** — Aravind, Mar 05 '17 at 06:49

No Toaster Containers have been initialized to receive toasts

2 Answers2