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"
}
}
