My AuthenticationService is responsible for loading the AngularFirestore and is loaded in the RootComponent. All app modules are lazily loaded within the RootComponent (which contains the main router-outlet). However, several sub-modules also load the AngularFirestore.
I need to ensure that the AuthenticationService is initialized (which involves asynchronous operations) before any components or modules are loaded. To achieve this, I placed it in the APP_INITIALIZER provider. This approach leads to a cyclic-dependency error stating:
Cannot instantiate cyclic dependency! AngularFirestoreIf I remove the AuthenticationService from the APP_INITIALIZER, the app functions without properly initializing the service.
Is there a solution to this issue? (other than manually calling auth.initialize() in all components)
App structure:
AppComponent -> RootComponent(AuthenticationService) -> All Submodules(AuthenticationService, AngularFirestore)
// AuthenticationService constructor
constructor(
private auth : AngularFireAuth,
private remoteconfig : AngularFireRemoteConfig,
private keepalive: Keepalive,
private idle: Idle,
private toast : ToastService,
private router : Router,
private fs : AngularFirestore,
private http : HttpClient,
) // APP_INITIALIZER provider in app.module.ts
{
provide: APP_INITIALIZER,
multi: true,
useFactory: authFactory,
deps: [
AuthenticationService
]
}
// Factory function for APP_INITIALIZER
export function authFactory(
auth : AuthenticationService
) {
return () : Promise<any> => auth.initialize();
}
Thank you!