ToastService

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: ToastService

gvonhagel pro asked 7 years ago

I am trying to use the ToastModule/Service with MDB Angular Pro. I have a core module that I'm trying to build a service that functions as the default ErrorHandler for my Angular application. I have been wracking my brain trying to get this to work. If I do this things the way the documentation suggests, IE. use ToastModule.forRoot() in my app.module, etc. I get "Cannot instantiate cyclic dependency!" when trying to inject the ToastService in my error-handling service by method of constructor(private toast: ToastService) Now, I can get it somewhat working by inject the Injector from @angular/core instead (constructor(private injector: Injector), in which case I don't get the cyclic dependency error, but I instead get a blank alert when using toast service as this.injector.get(ToastService).error/info/etc This is what the console/page looks like with the blank alert, that you can faintly see in the top left where it ought to be: https://gyazo.com/c7447c76ad6d77aa911e016fdd627ef1   Any help is appreciated, thank you  

gvonhagel pro commented 7 years ago

Anyone? I know you guys have a lot of questions to get to, but a simple point in the right direction would be great.

gvonhagel pro commented 7 years ago

Anyone..?

Dawid Adach pro answered 7 years ago

Dear gvonhagel, Please verify that you are using the latest version of MDB PRO, we have fixed that issue in 5.1.2. Please let me know how you installed MDB PRO - via npm or zip package? Make sure that you are importing Toast Module once and you are importing Toast Service in components (instead of Module again).

gvonhagel pro commented 7 years ago

I am using version 5.1.2, double checked to be sure. I installed MDB PRO via NPM. I am only importing the ToastModule once using ToastModule.forRoot() as specified in the documentation, and injecting it in the exception handling module as ToastService.

israelfreitas pro answered 5 years ago

Hi.

I'd like to know how that problem was fixed.

I have the same scenario (global error handler + Injector's injection to avoid cyclic dependency error) and I imported the ToastModule once using ToastModule.forRoot(), but I get the same error (a blank alert when using toast service as this.injector.get(ToastService)).

I'm using the latest version of MBD Angular.

Thank you.

israelfreitas pro commented 5 years ago

After some tests, I realize that it seems to be an issue with RxJS Observables. Look:

// test.component.ts:

throwErrorString() { // ErrorHandler captures the error and shows the toast just fine.

throw "An error...";
}

throwErrorObject() { // ErrorHandler captures the error and shows the toast just fine.
throw new Error("An error...");
}

throwRxJSThrowError() { // ErrorHandler capture the error but shows the a crashed toast.
throwError("An error...").subscribe();
}

Any help is appreciated.Thank you.

israelfreitas pro answered 5 years ago

Hi!

Finally, I found the solution! Thanks to michelepatrassi.

My ErrorHandler now looks like this:

import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
import { ToastService } from 'ng-uikit-pro-standard';

@Injectable()
export class MyErrorHandler implements ErrorHandler {

  constructor(private readonly injector: Injector, private readonly ngZone: NgZone) {  }

  private get toast() { return this.injector.get(ToastService) }

  handleError = (error: any): void => {
    this.ngZone.run(() => this.toast.error('Some message here...', 'Error!', {}))
  }
}

From now, the ErrorHandler knows how to handle errors from Observables.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
gvonhagel
Pro User
0Support score
2Questions 0Answers
0Snippets likes 0Snippets