angularangular2-toaster

Toaster styling not being applied

On initial load, I get the error No Toaster Containers have been initialized to receive toasts. which is an issue, but not the topic of this question (unless fixing it happens to resolve the other problems, which I have a sneaking suspicion it will).

The main issue comes when I try to pop toast and the toast text shows along with the fade in/out animation I want, but none of the styling I expect to see

I have a toaster-container in component.html, I import ToasterModule and list ToasterService as a provider in module.ts, and I have toaster.css imported in index.html. These are the potential solutions I have seen in other similar articles, and while they did make text appear when I pop a toast, they have not changed either of these current issues.

Please let me know if you see an error in the angular2-toaster implementation below, I've never worked with it before so it's very possible something is right under my nose and I just don't see it. I've also compared this code to other projects being done at work, and the code matches where I've read it needs to, but the other projects properly display toast styling.

My code is as follows:

rollPlan.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {Http, HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';
import {RollPlanComponent} from './rollPlan.component';
import {ToasterModule, ToasterService, ToasterConfig} from 'angular2-toaster';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HTTPRollPlanService} from './http/http.service';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ToasterModule,
    FormsModule,
    AgGridModule.withComponents([]),
    BrowserAnimationsModule //For the fade in/out animation
  ],
  declarations: [
    RollPlanComponent
  ],
  providers: [ToasterService],
  bootstrap: [RollPlanComponent]
})
export class RollPlanModule {}

rollPlan.component.ts:

import {Component} from '@angular/core';
import {Injectable} from '@angular/core';
import {NgModule} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {ReturnStruct} from './http/return-struct';
import {ViewEncapsulation, OnInit, ViewChild} from '@angular/core';
import {HTTPRollPlanService} from './http/http.service';
import {HttpHandler} from '@angular/common/http';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import {GridOptions} from 'ag-grid';
import {FormsModule} from '@angular/forms';
import {RollingPlan} from './rollingplan';
import {ToasterService, ToasterConfig, Toast} from 'angular2-toaster';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  templateUrl: './rollPlan.component.html',
  styleUrls: ['./rollPlan.component.css'],
  providers: [HTTPRollPlanService, ToasterService]
})


export class RollPlanComponent implements OnInit {    
  // Below are for toaster alerts
  toasterconfig: ToasterConfig = new ToasterConfig({
    animation: 'fade',
    positionClass: 'toast-top-right'
  });

  constructor(private httpService: HTTPRollPlanService, 
   private toasterService: ToasterService) {
  }

  popToast(typ: string, titl: string, bod: string) {
    var toast: Toast = {
      type: typ,
      title: titl,
      body: bod
    };
    this.toasterService.pop(toast);
  }

  /* There is more code here to implement ag-grid normally, but for this error 
     I chose to exclude it to provide the minimal/complete/verifiable example */
}

rollPlan.component.html:

<button (click)="popToast('info', 'Title', 'Body')">Pop Toast</button>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RollingPlan</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" src="../node_modules/angular2-toaster/toaster.css"/>

</head>
<body>
  <app-root></app-root> 
</body>
</html>

and finally

package.json:

{
  "name": "rolling-plan",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "ag-grid": "^16.0.1",
    "ag-grid-angular": "^16.0.0",
    "angular2-toaster": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.39",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}
Solution

  • There's a few potential issues (and solutions) to your problems.

    First, there is a new 5.0.0 version of angular2-toaster available that will definitively solve your No Toaster Containers have been initialized to receive toasts error by providing a ToasterModule.forRoot() implementation.

    To use this version, simply upgrade to 5.0.0 and change your angular2-toaster inclusion to:

    @NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    ToasterModule.forRoot(),
    FormsModule,
    AgGridModule.withComponents([]),
    BrowserAnimationsModule //For the fade in/out animation
  ],
  declarations: [
    RollPlanComponent
  ],
  providers: [], // note you no longer need to include ToasterService
  bootstrap: [RollPlanComponent]
})

    This will ensure a singleton toaster service in conjunction with your toaster container inclusion. If you cannot upgrade your version of the library, you should omit the ToasterService inclusion in the root providers and only include it in the providers of your component.

    For your issue, the lack of styling, you typically cannot bootstrap a node_modules css file directly in your html entry point.

    As a result, you have two options: