Topic: [6.1.2] Toast Module: Cannot instantiate cyclic dependency
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
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!");
}
}
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 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, DamianSteelLiras commented 7 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.