Angular 8: Cannot instantiate cyclic dependency - ActivatedRoute

Question

I am trying to integrate the APP_INITIALIZER from Angular in my project in order to do some functionalities before start the application. The problem comes when I use the ActivatedRoute from Angular in my service.

The error is:

Error: Provider parse errors:
Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

I suppose that I am using some import twice internally or something like this. Basically i tried with some other configurations but at the end always is throwing me the same error.

STACKBLITZ EXAMPLE: https://stackblitz.com/edit/angular-bhpe7m

Expected behavior: Just to be able to retrieve some QueryParams by the ActivatedRoute service and do some functionality with them before run the Angular app

In shared stackblitz : the `AppLoadModule` works as another feature module, Your `APP_INITIALIZER` should be in the `AppModule` which is referenced and bootstrapped in `main.ts` — nircraft, Jul 25 '19 at 16:00
Possible duplicate of [APP\_INITIALIZER raises "Cannot instantiate cyclic dependency! ApplicationRef\_" when used with a custom Http provider that is redirecting](https://stackoverflow.com/questions/39767019/app-initializer-raises-cannot-instantiate-cyclic-dependency-applicationref-w) — nircraft, Jul 25 '19 at 16:02
I know, but I was trying to do it separately, like this example: https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/ — Jgascona, Jul 25 '19 at 16:03
you can also check this: https://stackoverflow.com/questions/46441139/cannot-instantiate-cyclic-dependency-applicationref-error-in-ngmodule — nircraft, Jul 25 '19 at 16:04
Yes, because for now I don't need any other page on my application — Jgascona, Jul 25 '19 at 16:07

score 11 · Answer 1 · answered May 14 '20 at 12:10

Make sure to include HttpClientModule in your app.module.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
})
export class AppModule { }

yanky_cranky · Accepted Answer · 2019-07-26T08:01:53.237

5

Got your problem just remove router from your 'appLoaderService'

  constructor(private route: ActivatedRoute) {} // remove this dependency

You are getting cyclic dependency since you are injecting route in the config which initializes your app.

Refer this

Simply, remove this since you are not using it anyways.

However if you indent to use route before your bootstrapping component loads, you can go for resolver or guards.

As mentioned, it is not possible to use routes inside APP_INITIALIZER, *though there is a way**, but i would better suggest to use Resolver as following:

resolve(route: ActivatedRouteSnapshot): Promise<any> {
    const promise = new Promise((resolve, reject) => {
      if (route) {
        console.log(route.params);
        console.log(route.queryParams);
      }
 }
return promise;
}

Resolver for reference

EDIT Here is what you will have after placing code in resolver :

edited Jul 26 '19 at 08:01

answered Jul 25 '19 at 16:15

yanky_cranky

977
1
7
12

I know that, but in fact i need to use it, i was not showing it before in the stackblitx example but now it is updated. Because I need to store the query params retrieved at the start of the application in some variables. – Jgascona Jul 25 '19 at 16:22
i had faced the similar issue, if you put route inside your config, even then your component will not be loaded, now suppose you initializes couple of things in your app, you cannot show spinner component since "config" is the first thing which is loaded, moreover it is absurd to show your client blank screen unless you are done with all dependencies inside app.config. Let, me edit my answer, how can you read your query params via Resolver – yanky_cranky Jul 25 '19 at 16:27
It make sense, but how can i call the resolve method passing to it the route object? Example: https://stackblitz.com/edit/angular-bhpe7m – Jgascona Jul 26 '19 at 07:22
here check this [example for you](https://stackblitz.com/edit/angular-bhpe7m), please note as best practices you have to keep separate file for Resolver, and believe me this will help you resolving so many concerns in near future, which i had faced. – yanky_cranky Jul 26 '19 at 07:55
wow it seems like it is working for yoy, can you share this code in a stackblitz? the current one seems like its not updated.Thanks a lot for your helping @yanky_cranky – Jgascona Jul 26 '19 at 08:06
I don't really get the solution, and the stackblitz example it's not working as the image in your comment on top. What is exactly doing the appload service now? Thanks a lot – Jgascona Jul 26 '19 at 09:01
My bad, shared you the wrong url, [here](https://stackblitz.com/edit/angular-mb1tsx) you go – yanky_cranky Jul 26 '19 at 09:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/197036/discussion-between-jgascona-and-yanky-cranky). – Jgascona Jul 26 '19 at 09:35

score -4 · Answer 3 · answered Aug 10 '20 at 17:31

-4

I solved it by updating the package using the following code.

ng add @angular/localize

answered Aug 10 '20 at 17:31

Rutva Patel

1

Angular 8: Cannot instantiate cyclic dependency - ActivatedRoute

3 Answers3

Linked