Tostr messages not working. Script error in browser console.

Hi,

I followed the instructions to setup toastr as per the readme. Am using Angular version 4.1.3. ngx-toastr version is 5.2.4

this.toastrService.success(‘Hello world!’, ‘Toastr fun!’);

The above line is throwing the following exception in browser console:

dom-portal-host.js:45 Uncaught TypeError: Cannot read property 'attachView' of undefined at DomPortalHost.attachComponentPortal (dom-portal-host.js:45) at DomPortalHost.BasePortalHost.attach (portal.js:47) at OverlayRef.attach (overlay-ref.js:10) at ToastrService._buildNotification (toastr-service.js:152) at ToastrService.success (toastr-service.js:25)

Any help is greatly appreciated.

Thanks, Hari

[trevor-hackett]

I’ve implemented something like this before. Here is what I’ve done:

app.error-handler.ts:

import { ErrorHandler, Inject, Injector, NgZone, isDevMode } from "@angular/core";
import { Response } from "@angular/http";
import { ToastrService } from "ngx-toastr";

import * as Raven from 'raven-js'

export class AppErrorHandler implements ErrorHandler {
    constructor(@Inject(NgZone) private ngZone: NgZone, @Inject(Injector) private injector: Injector) { }

    private get toastr(): ToastrService {
        return this.injector.get(ToastrService);
    }

    public handleError(error: any): void {
        this.ngZone.run(() => {
            let errorTitle = 'Error';
            let errMsg = 'An unexpected error ocurred';

            if (error instanceof Response) {
                const contentType = error.headers.get("Content-Type")

                if (contentType && contentType == "application/json") {
                    const body = error.json();
                    errorTitle = body.message || errorTitle;
                    errMsg = body.detailedMessage || JSON.stringify(body);
                } else {
                    errMsg = error.text();
                }
            }
            this.toastr.error(errMsg, errorTitle);
        });

        if (!isDevMode())
            Raven.captureException(error.originalError || error);
        else
            throw error;
    }
}

And then in app.module.ts:

@NgModule({
  // ... other imports, declarations, etc.
  providers: [
    { provide: ErrorHandler, useClass: AppErrorHandler },
    // ... other providers
  ]
})
export class AppModule {}

This is very similar to what you’re doing. I’m not sure if NgZone is needed or not, it was working for HTTP error without it, but I decided to add it anyways, just in case.

[Silva-Macaneta]

@yarrgh wow… thank you so much, i was losing hope.