Angular 6 Error Handling not showing toasts

Question

I am using the code below to catch errors in my small Angular 6 app... I am catching the errors, I am showing info in the console the problem is that the toasts do not show unless I click somewhere in the application, they don't show up all by themselves. I am using the ToastrService in other parts of the application and whenever I call it like I do it here it shows toats without having to click on anything.

Any idea what might be causing this behaviour?

import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { AppSettings } from '../../app.settings';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  constructor(private injector: Injector) {}

  public handleError(error: any) {

    const router = this.injector.get(Router);
    const settings = this.injector.get(AppSettings)

    const toastr = this.injector.get(ToastrService);

    console.log(`Request URL: ${router.url}`);
    console.log(error);
    if (error instanceof HttpErrorResponse) {
      console.log("it is");
      if (error.status === 401) {
        router.navigate(['/login']);
        settings.settings.setLoadingSpinner(false);
        toastr.error('Logged in user no longer authenticated on server.', 'Unable to connect to server');
      } else if (error.status === 404) {
        console.log("it is 404");
        toastr.error('Unable to connect to server. Missing or wrong URL, please try again', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      } else if (error.status === 0) {
        toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      } else if (error.status === 500) {
        toastr.error('Server appears to be temporary unavailable', 'Unable to connect to server');
        settings.settings.setLoadingSpinner(false);
      }

    } else {
      console.error(error);
      toastr.error('An error has occured', 'Sorry');

    }

  }

}

I have added the provider in the module also to use this class as error handler.

It would be great if you could provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). You can use [StackBlitz](https://stackblitz.com/fork/angular) to create one. — SiddAjmera, Nov 23 '18 at 08:01

score 2 · Answer 1 · edited Jul 03 '20 at 19:22

2

I believe you can import and include NgZone in your constructor to have this work as intended:

constructor(private injector: Injector, private zone: NgZone) {}

Then wrap your toastr calls:

this.zone.run(() => toastr.error('message', 'title'));

edited Jul 03 '20 at 19:22

β.εηοιτ.βε

33,893
13
69
83

answered Jul 03 '20 at 18:44

IKramer

61
8

score 1 · Answer 2 · answered Nov 23 '18 at 08:14

1

please include the toaster service in constructor and run. As per my understanding, while service get instantiated, toaster should have to get initiated.

answered Nov 23 '18 at 08:14

shaan26

37
7

If I do this, I am getting a Error: Provider parse errors: Cannot instantiate cyclic dependency! – Vlad N Nov 23 '18 at 08:44

Angular 6 Error Handling not showing toasts

2 Answers2