在 HTTP_INTERCEPTOR 中使用时，库内的 NGX 翻译会引发循环依赖错误

Question

我有一个 angular 库，我在其中创建了一个 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());
    }
  }

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

在我的应用程序中，我在主 app.module.ts 中导入了 LanguageModule ，其中我还导入了我的 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.

我错过了什么？

Answer 1

您的 TranslateService 取决于 HttpClient，HttpClient 取决于 HTTP_INTERCEPTORS，其中包括 AuthInterceptor.

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

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

Answer 2

在我失去理智之后，github 上的某个人似乎找到了解决方案，方法是从 AppModule 的 TranslateModule.forRoot() 中删除 defaultLanguage。 https://github.com/gilsdav/ngx-translate-router/issues/94#issuecomment-791584329

在 HTTP_INTERCEPTOR 中使用时，库内的 NGX 翻译会引发循环依赖错误

NGX Translate inside Library throws Circular Dependency error when used in HTTP_INTERCEPTOR

ngx-translate

angular