Angular 6功能模块：拦截器不触发

Question

I'm using feature modules for the first time and cannot get an interceptor to fire. I'm new to the feature model pattern and am hoping somebody can point out an obvious error in my understanding. The interceptor is called "AuthenticationInterceptor". I have pasted my code below and would greatly appreciate any help.

The structure of my codebase is as follows:

/app

app.module.ts
...
/dashboard
    dashboard.module.ts
    dashboard-routing.module.ts
    dashboard.component.ts
    ...
/core
    core.module.ts
    ...
/shared
    shared.module.ts
    ....

APP.MODULE.TS

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CoreModule } from './core/core.module'
import { SharedModule } from './shared/shared.module'
import { DashboardModule } from './dashboard/dashboard.module'

import { AppComponent } from './app.component';

import { AuthenticationInterceptor } from './core/interceptors/authentication.interceptor'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    CoreModule.forRoot(),
    DashboardModule
  ],
  exports: [
    MaterialModule
  ],
  providers: [
    {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthenticationInterceptor,
        multi: true
    } 
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

APP-ROUTING.MODULE.TS

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { 
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true } )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

SHARED.MODULE.TS

import { NgModule, ModuleWithProviders } from '@angular/core'
import { CommonModule } from '@angular/common'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@NgModule({
    imports: [
    CommonModule,
    FormsModule,
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule, 
    ReactiveFormsModule,
  ]
})
export class SharedModule { 

  static forRoot() {

    return {
        ngModule: SharedModule,
        providers: []
    }
  }
}

CORE.MODULE.TS

import { NgModule, ModuleWithProviders, Optional, SkipSelf } from '@angular/core'
import { HttpModule } from '@angular/http'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AuthenticationInterceptor } from './interceptors/authentication.interceptor'

@NgModule({
    imports: [
        HttpModule,
        HttpClientModule
    ]  
})
export class CoreModule {

    constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

        if (parentModule) {
            throw new Error('CoreModule is already loaded. Import it in the AppModule only');
        }
    }

    static forRoot(): ModuleWithProviders {

        return {
            ngModule: CoreModule,
            providers: [
                AuthenticationInterceptor
            ]  
        }
    }    
}

DASHBOARD.MODULE.TS

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { SharedModule } from '../shared/shared.module'
import { AuthenticationInterceptor } from './../core/interceptors/authentication.interceptor'

import { DashboardRoutingModule } from './dashboard-routing.module'
import { DashboardComponent } from './dashboard.component'

@NgModule({
    imports: [
        CommonModule,
        DashboardRoutingModule,
        SharedModule,
    ],
    declarations: [
        DashboardComponent
    ],
    exports: [
        DashboardComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthenticationInterceptor,
            multi: true
        }
    ]
})
export class DashboardModule { }

DASHBOARD-ROUTING.MODULE.TS

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard.component';
import { AuthenticationGuard } from './../core/guards/authentication.guard';

const routes: Routes = [
    { 
    path: '', 
        component: DashboardComponent,
        canActivate: [
            AuthenticationGuard
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class DashboardRoutingModule {}

Answer 1

If you import HttpClientModule every time for feature module then for every instance of a module there is a new instance of HttpClientModule . That's why your interceptor is not working. Import HttpClientModule only at app.module.ts and it will intercept all HTTP requests.