Angular 6+：在非根模块中提供导致循环依赖

Question

我正在尝试通过新的providedIn 属性提供解析服务。

这是我在受保护模块中使用的翻译解析器：

import { Injectable } from '@angular/core';

import { Observable , pipe } from 'rxjs';
import {map} from "rxjs/operators";

//This is causing: "WARNING in Circular dependency detected:"
import {ProtectedModule} from "../../../protected/protected.module";

import { HttpHandlerService } from '../../http/http-handler.service';

@Injectable({
  providedIn: ProtectedModule //Over here (I need the import for this line)
})
export class TranslationsResolverService {
  constructor(private _httpHandlerService : HttpHandlerService) { }
    resolve(): any {
      //Do Something...
    }
}

我在受保护的路由模块中声明了翻译解析器服务：

import { NgModule }           from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

import {AuthGuard} from "../core/resolvers/auth/auth.guard";
import {TranslationsResolverService} from "./../core/resolvers/translations/translations-resolver.service";

const routes: Routes = [
  {
    path : 'app' ,
    component: ProtectedComponent,
    resolve : {
      translations : TranslationsResolverService // <---- Over here - i can't remove that of course
    },
    canActivate: [AuthGuard],
    ]
  }
];


@NgModule({
  imports : [RouterModule.forChild(routes)],
  exports : [RouterModule]
})
export class ProtectedRoutingModule { }

因为我在translations-resolver.service.ts 中导入（打字稿导入）protected.module 为了在providedIn 属性中使用它我在检测到循环依赖时收到警告：

path/to/translations-resolver.service.ts -> 

protected/protected.module.ts ->

protected/protected-routing.module.ts -> 

path to translations-resolver.service.ts

第二个路径（protected/protected.module.ts）由于providedIn属性而被添加。

我可以通过将translationsResolver 提供为NgModule provider（在提供程序数组中）来解决此问题，但我更喜欢它是injectable 提供程序。

有解决这个问题的建议吗？

Answer 1

我遇到了同样的问题。原来解决方案是“不要这样做”，正如其中一位 Angular 人员在此线程中所解释的那样：https://github.com/angular/angular-cli/issues/10170#issuecomment-380673276

据我所知，当它们由根模块提供时，服务更容易摇树。

我和你一样失望。

Answer 2

更新 - 2019 年 10 月

我现在已经收到 5 票赞成这个答案，所以我觉得我应该坦白说我实际上不再遵循我自己的建议（下）！

由于官方（并被广泛遵循）Angular 政策是使用providedIn: 'root'，因此我决定总体而言，如果我坚持这一点，其他开发人员不会感到困惑。到目前为止，它还没有给我带来任何问题，但是下面的警告仍然存在，我相信保持意识到这一点很重要。

原帖

我认为 Angular 把 providedIn 语法弄得有点乱。似乎让很多人感到困惑。例如。查看这两个 github 线程：

• https://github.com/angular/angular-cli/issues/10170
• https://github.com/angular/angular/issues/25784

providedIn 语法似乎有两个主要的好处：

1. 它支持对未使用的服务进行 tree-shaking
2. providedIn: 'root' 确保您只获得一个服务实例

但是，如果您正在编写 library 而不是 应用程序，那么您只需要 (1)（因为您为什么要包含不需要的服务在您的应用程序中），并且您可以通过确保不多次导入服务模块来避免多个服务实例 (2)。

providedIn 语法的问题是：

1. providedIn: 'root' 打破了服务和它“存在”（或“与”）模块之间的联系——因为服务不知道模块，模块也不知道服务。这意味着该服务不再真正“属于”该模块，而只会与它的任何引用捆绑在一起。这反过来意味着现在由服务 consumer 来确保服务的可注入依赖项（如果有的话）在使用之前可用，这是令人困惑且非常违反直觉的（除非当然，依赖关系——以及它们的依赖关系等——也都是providedIn: 'root'，在这种情况下它们会自己处理）。
2. 上述循环引用问题。实际上不可能 - 通过这种语法 - 保留服务与其模块之间的链接，如果该服务实际上被同一模块中的任何组件使用 .

这与 Angular 官方指南相反，但我的建议是：不要使用 providedIn，除非您正在编写需要摇树的第三方库 - 使用旧的 (不推荐使用）providers 模块上的语法，即：

@NgModule({ providers: [MyService], })

Answer 3

这不是 Angular 依赖问题。

循环引用由 TypeScript 编译器在尝试解析循环 imports 时生成。

第一个解决方案

创建一个名为ProtectedResolversModule 的新模块并使用providedIn: ProtectedResolversModule 并将解析器移到那里。

现在您可以将该模块导入ProtectedModule，并且在加载ProtectedRoutingModule 时不会出现循环依赖错误。

第二种解决方案

使用ProtectedModule 的providers 数组。

Answer 4

在 Angular9+ 中

你可以使用 providerIn: Any

基本上它就像模块一样工作，但你不直接使用模块所以没有更多的循环依赖

文档：https://angular.io/api/core/Injectable#options

'any' ：在每个延迟加载的模块中提供一个唯一的实例，而所有急切加载的模块共享一个实例。

换句话说，它位于不同的注入树中。它与您在其他模块中使用的实例不同。

更多参考

https://dev.to/christiankohler/improved-dependeny-injection-with-the-new-providedin-scopes-any-and-platform-30bb

'Any' 非常有助于确保服务是模块边界内的单例。它是 'root' 的强大替代方案，可确保各个模块不会对彼此产生副作用。

https://indepth.dev/posts/1151/a-deep-dive-into-injectable-and-providedin-in-ivy

providerIn 的代码

  private injectableDefInScope(def: ɵɵInjectableDef<any>): boolean {
    if (!def.providedIn) {
      return false;
    } else if (typeof def.providedIn === 'string') {
      return def.providedIn === 'any' || (def.providedIn === this.scope);
    } else {
      return this.injectorDefTypes.has(def.providedIn);
    }
  }

Answer 5

检查 angular/core 中的 forwardRef() 函数。它允许引用尚未定义的引用。

import {MyService} from './service';

constructor(@Inject(forwardRef(() => MyService)) public myService: MyService) {
}