无法实例化循环依赖！ ApplicationRef ("[ERROR ->]"): 在 NgModule AppModule 中的 ./AppModule@-1:-1答案

【问题标题】：Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1无法实例化循环依赖！ ApplicationRef ("[ERROR ->]"): 在 NgModule AppModule 中的 ./AppModule@-1:-1
【发布时间】：2018-03-08 13:03:37
【问题描述】：

我已将此代码添加到我的 app.module.ts 中

    providers: [ AppConfigService,
            {
                provide: APP_INITIALIZER,
                useFactory: (config: AppConfigService) => () => config.getAppConfig(),
                deps: [AppConfigService],
                multi: true
            },
]

收到此错误

问题：我已使用ngx-permission pkg 获得许可。我设置了route 权限方法。但是当我刷新页面时，主页上的时间重定向而不是停留在当前页面上。所以我尝试to load permissions before application start up method 来解决这个问题，但得到了这个错误。

 config.getAppConfig() // call when application start up

有任何想法请帮忙。也欢迎其他解决方案。

【问题讨论】：

如何声明服务依赖于自己？在我看来，在“deps”中你应该提供 Angular 模块，而不是服务。你可以只使用一个空列表作为 deps 吗？

标签： angular

【解决方案1】：

当您的 APP_INITIALIZER 中的依赖项依赖于 Angular 服务时，可能会发生此错误，例如Router.

解决方案是惰性注入，方法是将服务的构造函数改为接受Injector，然后解析构造函数之外的值。

例如AppConfigService:

import { Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {

  // Helper property to resolve the service dependency.
  private get _router() { return this._injector.get(Router); }

  constructor(
    //private _router: Router
    private _injector: Injector
  ) { }

  navigate() {
    this._router.navigate(['/']);
  }
}

【讨论】：

您的回答实际上启发了我不要使用 APP_INITIALIZER 而是创建自己的 APP_START 令牌，该令牌用于某些应用程序核心模块构造函数中，以在 Angular 模块准备好后加载所有服务

【解决方案2】：

我已经用这个解决方案解决了我的问题

在 app.module.ts 中创建函数

export function loadConfig(appService: AppConfigService): Function {
    return () => appService.getAppConfig();
}

 AppConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: loadConfig,
            deps: [AppConfigService],
            multi: true
        },

issue into `HttpInterceptor` so i used injector for that
constructor(private inj: Injector) {
        super(
            inj.get(XHRBackend),
            inj.get(RequestOptions)
        );
}

【讨论】：

你在哪里使用构造函数？我

【解决方案3】：

我在动态更新路线时遇到了同样的问题。
实际上，您不必手动注入依赖项。您所要做的就是拆分循环。首先解决依赖关系，然后使用它们。
这是路由器的示例，但您可以设置任何您喜欢的依赖项。

// AppModule
{
  provide: APP_INITIALIZER,
  useFactory: myFactoryUpdatingRoutes, // init routes from special config
  multi: true,
  deps: [MyRouterLoader],
},

配置类：

@Injectable({
  providedIn: 'root',
})
export class MyRouterLoader{
  // MyRouterLoader prevents cyclic dependencies.
  // Router cannot be part of "deps" of AppModule's APP_INITIALIZER
  // so we have to split dependencies resolving
  constructor(private router: Router,
              private routeConfig: MySpecialRoutesConfig) { }

  // actually update routes
  public injectSpecialRoutes() {
    this.router.resetConfig([
      {
        path: this.routeConfig.urls['my-home-url-key'],
        component: HomeComponent
      },
      {
        path: this.routeConfig.urls['my-admin-url-key'],
        component: AdminComponent
      },
      {
        path: '**',
        redirectTo: '/',
      }
    ])
  }
}

export function myFactoryUpdatingRoutes(myRouterLoader: MyRouterLoader) {
  myRouterLoader.injectSpecialRoutes();
}

【讨论】：