Http 拦截器被错误地应用于 Angular 中的兄弟模块 11

Question

我有以下模块结构：

不幸的是，我在 core.module.ts 中提供的core.module.ts拦截器也适用于translation.module.ts中的 HTTP 客户端。 我的核心模块如下所示：

@NgModule({
  declarations: [DefaultLayoutComponent],
  providers: [
    { provide: BASE_API_URL, useValue: environment.api },
    { provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true }
  ],
  imports: [BrowserModule, BrowserAnimationsModule, RouterModule, HttpClientModule],
  exports: [DefaultLayoutComponent]
})
export class CoreModule {}

我的翻译模块有以下代码：

@Injectable({ providedIn: 'root' })
export class TranslationLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  declarations: [],
  imports: [HttpClientModule, TranslocoModule],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en-US', 'de-CH', 'fr-CH', 'it-CH'],
        defaultLang: 'en-US',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslationLoader }
  ]
})
export class TranslationModule {}

这两个模块都在我的应用程序模块中使用：

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule, CoreModule, TranslationModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

翻译模块会加载一些 JSON 文件，这些文件没有正确的 URL，因为应用了BaseUrl拦截器。 有人知道如何处理这个问题吗？

我不想要的是一种解决方法，例如仅在拦截器中有条件地应用基础 url 或检查某些自定义 header。

Answer 1

您提供TranslationLoader加载程序的方式似乎很奇怪。 您既在模块中提供它，又在Injectable装饰器中将providedIn值设置为forRoot 。 可能是通过以您当前的方式做事，这可能会使依赖注入器产生一些混乱。 如果有人在没有TRANSLOCO_LOADER令牌的情况下注入它，我尤其会看到一个问题——它究竟如何知道要使用哪个HttpClientModule ？

因此，请尝试选择一种方法并将其从提供程序中删除，或者从装饰器中删除providedIn参数并仅使用注入令牌注入它。