时间戳

首页 > 解决方案 > 在 HTTP_INTERCEPTOR 中使用时，库中的 NGX Translate 会引发循环依赖错误

angular - 在 HTTP_INTERCEPTOR 中使用时，库中的 NGX Translate 会引发循环依赖错误

问题描述

我有一个角度库，我在其中创建了一个LanguageModule 定义如下

@NgModule({
    imports: [
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient]
        },
      })
    ],
    exports: [TranslateModule]
  })
  export class LanguageModule {
    public constructor(translateSvc: TranslateService, http: HttpClient) {
      translateSvc.onLangChange
        .pipe(
          switchMap((currentLang: LangChangeEvent) => zip(
            of(currentLang),
            http.get(`assets/i18n/${currentLang.lang}.json`),
          ))
        ).subscribe(([currentLang, localizations, syncfusionLocalization]) => {
          translateSvc.setTranslation(translateSvc.currentLang, localizations, true);
          setCulture(currentLang.lang);
        });
  
      translateSvc.use(translateSvc.getDefaultLang());
    }
  }

这允许我合并库和应用程序本地化文件。

在我的应用程序中，我LanguageModule 在 main中导入了app.module.ts，我也在其中导入了 my CoreModule，定义如下：

@NgModule({
    imports: [
      CommonModule,
      HttpClientModule,
      BrowserAnimationsModule,
      ...
    ],
    declarations: [],
    providers: [
        ....
      // Http interceptors
      {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthInterceptor,
        multi: true
      }
    ]
  })
  export class CoreModule {  
    public constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
      if (parentModule) {
        throw new Error('CoreModule has already been loaded. Import CoreModule in the AppModule only.');
      }
    }  
  }

在中AuthInterceptor，如果我注入TranslateService 我得到以下错误： Circular dependency in DI detected for InjectionToken HTTP_INTERCEPTORS.

我错过了什么？

标签： angularngx-translate

解决方案

你的TranslateService取决于HttpClient，HttpClient取决于HTTP_INTERCEPTORS哪个包括AuthInterceptor。

因此，当您添加TranslateService为依赖项时，AuthInterceptor您会得到一个完整的圆圈：TranslateService=> TranslateLoader=> HttpClient=> AuthInterceptor=> TranslateService。

这里有官方指南https://angular.io/errors/NG0200

推荐阅读