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

如何解决Http 拦截器错误地应用于 Angular 11 中的兄弟模块

我有以下模块结构：

不幸的是，我在 core.module.ts 中提供的 HTTP 拦截器也应用于 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 {}

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

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

解决方法

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

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