Angular 8：无法实例化循环依赖 - ActivatedRoute

Posted 2023-02-24

【中文标题】Angular 8：无法实例化循环依赖 - ActivatedRoute

【英文标题】：Angular 8: Cannot instantiate cyclic dependency - ActivatedRoute

【发布时间】：2019-12-03 23:19:00

【问题描述】：

我正在尝试将来自 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 服务检索一些 QueryParam，并在运行 Angular 应用程序之前对它们执行一些功能

【问题讨论】：

感谢@nircraft 的格式化 :)

在共享堆栈闪电战中：AppLoadModule 用作另一个功能模块，您的APP_INITIALIZER 应该在AppModule 中，它在main.ts 中被引用和引导

APP_INITIALIZER raises "Cannot instantiate cyclic dependency! ApplicationRef_" when used with a custom Http provider that is redirecting的可能重复

我知道，但我想单独做，比如这个例子：intertech.com/Blog/…

你也可以看看这个：***.com/questions/46441139/…

【参考方案1】：

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

【参考方案2】：

我通过使用以下代码更新包来解决它。

ng add @angular/localize

【参考方案3】：

确保在你的 app.module.ts 中包含 HttpClientModule

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

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

【参考方案4】：

你的问题只是从你的“appLoaderService”中删除路由器

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

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

Refer this

简单地说，删除它，因为你不使用它。

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

如前所述，不能在 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供参考

编辑 将代码放入解析器后，您将拥有以下内容：

【讨论】：

我知道，但实际上我需要使用它，我之前没有在 stackblitx 示例中显示它，但现在它已更新。因为我需要将应用程序启动时检索到的查询参数存储在一些变量中。

我遇到了类似的问题，如果你把路由放在你的配置中，即使那样你的组件也不会被加载，现在假设你在你的应用程序中初始化了一些东西，你不能显示微调器组件，因为“ config" 是首先加载的内容，此外，除非您完成了 app.config 中的所有依赖项，否则显示客户端空白屏幕是荒谬的。让我编辑我的答案，您如何通过解析器读取您的查询参数

有道理，但是我如何调用传递给它的路由对象的解析方法？示例：stackblitz.com/edit/angular-bhpe7m

在这里查看example for you，请注意作为最佳实践，您必须为 Resolver 保留单独的文件，相信我这将帮助您在不久的将来解决我面临的许多问题。

哇，它似乎适用于 yoy，你能在堆栈闪电战中分享这段代码吗？当前的似乎没有更新。非常感谢您的帮助@yanky_cranky