Angular 6+ :ProvidedIn 非根模块导致循环依赖 [英] Angular 6+ :ProvidedIn a non root module is causing a circular dependency

问题描述

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

I'm trying to provide a resolve service via the new providedIn attribute.

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

This is a translations resolver which I use in a protected module:

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...
    }
}

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

I declared the translations resolver service in the protected routing module:

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 属性 我在检测到循环依赖项中收到警告:

Because of the fact that I import (typescript import) the protected.module in the translations-resolver.service.ts in order to use it in the providedIn attribute I get a WARNING in Circular dependency detected:

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

protected/protected.module.ts ->

protected/protected-routing.module.ts -> 

path to translations-resolver.service.ts

由于 providedIn 属性，添加了第二个路径 (protected/protected.module.ts).

The 2nd path (protected/protected.module.ts) is added due to the providedIn attribute.

我可以通过提供 translationsResolver 作为 NgModule provider(在 providers 数组中)来解决这个问题，但我更喜欢它是一个 injectable 提供商.

I can fix this by just providing the translationsResolver as a NgModule provider (in the providers array) but I prefer it to be an injectable provider.

有什么解决这个问题的建议吗?

Any suggestions for solving this?

推荐答案

这不是 Angular 依赖问题.

This isn't an Angular dependencies problem.

循环引用由 TypeScript 编译器在尝试解析循环导入时生成.

The circular reference is generated by the TypeScript compiler when it tries to resolve the circular imports.

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

Create a new module named ProtectedResolversModule and use providedIn: ProtectedResolversModule and move the resolvers there.

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

Now you can import that module into ProtectedModule and you won't get a circular dependency error when loading ProtectedRoutingModule.

使用ProtectedModule 的providers 数组.

这篇关于Angular 6+ :ProvidedIn 非根模块导致循环依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！