[6.1.2] Toast Module: Cannot instantiate cyclic dependency

Topic: [6.1.2] Toast Module: Cannot instantiate cyclic dependency

SteelLiras free asked 6 years ago

Hello, I'm trying to use the Pro Angular Toast/Alert service and I keep getting this error: Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1 In my core.module.ts I import the module: import { ToastModule } from "ng-uikit-pro-standard"; ToastModule.forRoot(), and I'm trying to use it in my ErrorHandler service: import { ToastService } from "ng-uikit-pro-standard"; this._toastService.error("An error occured!"); Am I doing something wrong? If I try impoerting the service/module directly from ../../node_modules/..etc it says, can't find module. I really do need this. A prompt answer would be appreciated. Thanks, Jarek

Damian Gemza staff commented 6 years ago

Dear Jarek, Could you try to add to your core.module.ts also MDBBootstrapModulesPro.forRoot() import? Or if this won't work, could you please temporarily add ToastModule and MDBBootstrapModulesPro to app.module.ts and check if it works? Best Regards, Damian

SteelLiras free commented 6 years ago

It works when I have both imports in the App module and I use the Toast service in app.component. Once I move at least one of them into Core or Shared, I get the cyclic dependency error. Btw, this is a Universal project, turning off ServerTransition and HttpTransferModule changes nothing. I have lazy-loaded modules which import the Shared module. The core module imports the Shared module too (but it doesn't fix it when I remove Shared from Core's imports). The App module imports the Browser and Core module.

Add comment

SteelLiras free answered 6 years ago

0 0 Best answer

I solved the issue.

The problem was that I was using this within a class that extended Angular's ErrorHandler. This class was injected as the default error handler in the core module. I don't know the DI details on this, but this sounds problematic with regards to which service gets loaded first, etc. So, I've tried forwardRef, which in turn gave me an error indicating that maximum call stack size has been exceeded (which implies cyclic dependency...). Finally, I hacked around this using an injector that injected the ToastService on the first call to the handleError method rather than in the class constructor. This is still a weird behaviour though.
<div>
<div>import { Injectable, ErrorHandler, Injector } from "@angular/core";</div>
<div>import { HttpErrorResponse } from "@angular/common/http";</div>
<div>import { ToastService } from "ng-uikit-pro-standard";</div>
<div>@Injectable()</div>
<div>export class ErrorHandlerService implements ErrorHandler {</div>
<div>private_toastService?:ToastService;</div>
<div>publicconstructor(private_injector:Injector) {}</div>
<div>publichandleError(error:Error|HttpErrorResponse) {</div>
<div>if (!this._toastService) {</div>
<div>this._toastService=this._injector.get(ToastService);</div>
<div>}</div>
<div>if (this._toastService) {</div>
<div>if (errorinstanceofHttpErrorResponse) {</div>
<div>if (!navigator.onLine) {</div>
<div>console.error("Client error occurred: ", error.error.message);</div>
<div>this._toastService.error("Wystąpił błąd!");</div>
<div>} else {</div>
<div>console.error(`Backend returned code ${error.status},`+`body was:`);</div>
<div>console.error(error.error);</div>
<div>this._toastService.error(`Wystąpił błąd! (${error.status})`);</div>
<div>}</div>
<div>} else {</div>
<div>console.error("Application error occured: ", error);</div>
<div>this._toastService.error("Wystąpił błąd!");</div>
<div>}</div>
<div>}</div>
<div>}</div>
<div>}</div>
</div>
<div>
<div>
<pre></pre>
</div>
</div>

Please insert min. 20 characters.

I solved the issue. The problem was that I was using this within a class that extended Angular's ErrorHandler. This class was injected as the default error handler in the core module. I don't know the DI details on this, but this sounds problematic with regards to which service gets loaded first, etc. So, I've tried forwardRef, which in turn gave me an error indicating that maximum call stack size has been exceeded (which implies cyclic dependency...). Finally, I hacked around this using an injector that injected the ToastService on the first call to the handleError method rather than in the class constructor. This is still a weird behaviour though.

import { Injectable, ErrorHandler, Injector } from "@angular/core";

import { HttpErrorResponse } from "@angular/common/http";

import { ToastService } from "ng-uikit-pro-standard";

@Injectable()

export class ErrorHandlerService implements ErrorHandler {

private_toastService?:ToastService;

publicconstructor(private_injector:Injector) {}

publichandleError(error:Error|HttpErrorResponse) {

if (!this._toastService) {

this._toastService=this._injector.get(ToastService);

}

if (this._toastService) {

if (errorinstanceofHttpErrorResponse) {

if (!navigator.onLine) {

console.error("Client error occurred: ", error.error.message);

this._toastService.error("Wystąpił błąd!");

} else {

console.error(`Backend returned code ${error.status},`+`body was:`);

console.error(error.error);

this._toastService.error(`Wystąpił błąd! (${error.status})`);

}

} else {

console.error("Application error occured: ", error);

this._toastService.error("Wystąpił błąd!");

}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

SteelLiras

10Support score
3Questions 1Answers 0Snippets