Angular共享模块组件如何使用AppModule中配置的拦截器？

首先得说清楚：正常情况下，你在AppModule里配置的HTTP_INTERCEPTORS应该是全局生效的，整个应用（包括SharedModule里的组件）都能用上。如果SharedModule里的组件没生效，大概率是模块导入方式有问题，或者SharedModule的配置存在冲突。下面给你几个可行的解决方案：

方案1：检查SharedModule的导入逻辑 #

• 确认你的SharedModule是被AppModule直接或间接导入的，而不是只被某个懒加载模块单独导入。如果SharedModule仅在懒加载模块里导入，这个懒加载模块会创建独立的注入器，导致无法共享AppModule里的拦截器实例。
• 正确做法：在AppModule里导入SharedModule，其他模块（包括懒加载模块）也可以导入SharedModule——Angular会把SharedModule的声明（组件、指令、管道）共享给所有导入它的模块，但全局providers只会在根注入器（AppModule）里创建一次。

方案2：用CoreModule统一管理全局拦截器（推荐最佳实践） #

为了避免模块导入带来的注入器问题，Angular官方推荐把全局服务、拦截器这类依赖放到CoreModule中，并用forRoot()方法确保全局实例唯一：

1. 创建CoreModule：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProgressInterceptor } from './progress.interceptor';

@NgModule({})
export class CoreModule {
  // forRoot()确保全局服务仅被初始化一次
  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [
        { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true }
      ]
    };
  }
}

2. 在AppModule中导入CoreModule.forRoot()：

import { CoreModule } from './core/core.module';

@NgModule({
  imports: [
    // 其他模块...
    CoreModule.forRoot()
  ],
  // 移除原AppModule中拦截器的providers配置
})
export class AppModule { }

3. SharedModule和其他功能模块只需导入CoreModule（无需调用forRoot()）：

import { CoreModule } from '../core/core.module';

@NgModule({
  imports: [
    CoreModule,
    // 其他模块...
  ],
  declarations: [/* Shared组件集合 */],
  exports: [/* Shared组件集合 */]
})
export class SharedModule { }

这种方式能确保拦截器在整个应用（包括SharedModule的组件）里全局生效，还能避免重复导入模块导致的多实例问题。

方案3：排查SharedModule的冲突配置 #

检查你的SharedModule里是否自己配置了HTTP_INTERCEPTORS，如果有的话，会和AppModule的配置产生冲突，导致SharedModule的组件只能使用自身模块内的拦截器。如果存在这类配置，直接删除，统一用AppModule或CoreModule的全局配置即可。

内容的提问来源于stack exchange，提问作者Andrew Howard