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.

Answer 1

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

Answer 2

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