Angular 6+:Provided在非根模块中导致循环依赖 [英] 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+:Provided在非根模块中导致循环依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！