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

【问题标题】：NGX Translate inside Library throws Circular Dependency error when used in HTTP_INTERCEPTOR在 HTTP_INTERCEPTOR 中使用时，库中的 NGX Translate 会引发循环依赖错误
【发布时间】：2021-09-16 21:49:54
【问题描述】：

我有一个 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.

我错过了什么？

【问题讨论】：

你们可以提供一个stackblitz吗？我想知道你的 AuthInterceptor 有什么。我确实也为我的 ngx-translate 创建了一个库，但意识到 TranslateModule.forRoot({}) 仍然必须在导入该库的项目中实例化。如果您想将多个 i18n 文件合并在一起，这也很有用。 您的图书馆中的一个和您本地项目中的一个
通常您可以使用injector 或将组件移动到不同的模块来解决循环依赖关系，请参阅此stackoverflow.com/questions/67152273/…（看起来像您的问题）
@Eliseo 我已经尝试过使用注射器，但仍然遇到同样的错误。在这种情况下，我无法将拦截器移动到另一个模块

标签： angular ngx-translate

【解决方案1】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
这行得通！不知道为什么要诚实，但确实如此！

【解决方案2】：

您的TranslateService 依赖于HttpClient，HttpClient 依赖于HTTP_INTERCEPTORS，其中包括AuthInterceptor。

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

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

【讨论】：

感谢您的洞察力！您能否详细说明潜在的解决方案是什么样的？
实际看了一下ngx-translate服务源码，它不依赖HttpClient
@AaronUllal，它依赖于依赖于 HttpClient 的 TranslateLoader，我已经更新了答案。
谢谢！这就说得通了。你打算如何解决这张CD？我试过使用注入器来获取 translateService 但我仍然得到同样的错误
@AaronUllal 你找到解决办法了吗？