Angular8: 无法实例化循环依赖 - ActivatedRoute

Question

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

错误是：

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

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

STACKBLITZ 示例： https://stackblitz.com/edit/angular-bhpe7m

预期行为：只是为了能够通过 ActivatedRoute 服务检索一些 QueryParams 并在运行 Angular 应用程序

之前使用它们执行一些功能

Answer 1

遇到问题只需从 'appLoaderService'

中删除路由器

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

您正在获得循环依赖性，因为您在初始化您的应用程序的配置中注入路由。

简单地说，删除它，因为您无论如何都不会使用它。

但是，如果您在引导组件加载之前缩进使用路由，则可以使用解析器或守卫。

如前所述，无法在 APP_INITIALIZER 内使用路由，*虽然有办法**，但我最好建议使用 Resolver，如下所示：

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

Resolver供参考

编辑这是将代码放入解析器后的结果：

Answer 2

确保在您的 app.module.ts

中包含 HttpClientModule

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

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

Answer 3

我通过使用以下代码更新包解决了这个问题。

ng add @angular/localize

Answer 4

这是由于依赖注入中的循环而发生的，例如，您在其构造函数中将服务注入了自身！

Angular8: 无法实例化循环依赖 - ActivatedRoute

Angular 8: Cannot instantiate cyclic dependency - ActivatedRoute

cyclic-dependency

angular