title: Toaster styling not being applied
body: <p>On initial load, I get the error <code>No Toaster Containers have been initialized to receive toasts.</code> 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). </p>
  
  <p>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 <a href="http://plnkr.co/edit/PfOLJa4Qh304cJHvIxOa?p=preview" rel="nofollow noreferrer">the styling I expect to see </a></p>
  
  <p>I have a <code>toaster-container</code> in <code>component.html</code>, I import <code>ToasterModule</code> and list <code>ToasterService</code> as a provider in <code>module.ts</code>, and I have <code>toaster.css</code> imported in <code>index.html</code>. 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.</p>
  
  <p>Please let me know if you see an error in the <code>angular2-toaster</code> 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.</p>
  
  <p>My code is as follows:</p>
  
  <p><strong>rollPlan.module.ts:</strong></p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p><strong>rollPlan.component.ts:</strong></p>
  
  <pre><code>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 */
  }
  </code></pre>
  
  <p><strong>rollPlan.component.html:</strong></p>
  
  <pre><code>&lt;button (click)="popToast('info', 'Title', 'Body')"&gt;Pop Toast&lt;/button&gt;
  &lt;toaster-container [toasterconfig]="toasterconfig"&gt;&lt;/toaster-container&gt;
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;RollingPlan&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" type="text/css" src="../node_modules/angular2-toaster/toaster.css"/&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and finally </p>
  
  <p><strong>package.json:</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>