Angular 8:无法实例化循环依赖关系-ActivatedRoute [英] Angular 8: Cannot instantiate cyclic dependency - ActivatedRoute

问题描述

我正在尝试将Angular中的 APP_INITIALIZER 集成到我的项目中，以便在启动应用程序之前执行一些功能.当我在服务中使用Angular中的 ActivatedRoute 时，就会出现问题.

错误是:

 错误:提供程序解析错误:无法实例化循环依赖！ApplicationRef("[ERROR->]"):在./AppModule@-1:-1中的NgModule AppModule中 

我想我内部使用了两次import或类似的东西.基本上，我尝试了其他一些配置，但最后总是抛出相同的错误.

STACKBLITZ示例:

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

解决方案

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 :

这篇关于Angular 8:无法实例化循环依赖关系-ActivatedRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！