title: Use interceptor for components in shared modules
body: <p>I am using Angular's new interceptor feature within "app.module" and all components in my app are successfully using it:</p>
  
  <pre><code>import { ProgressInterceptor } from "./progress.interceptor";
  providers: [
        { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true }
    ]
  </code></pre>
  
  <p>However I also have a "shared.module" and all components in there are <strong>not</strong> using the interceptor even though it's been declared in "app.module". How can I get the components in "shared.module" to use the same interceptor?</p>
  
  <p>For reference here is my "shared.module":</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { RouterModule } from "@angular/router";
  import { MyDatePickerModule } from 'mydatepicker';
  import { EditorModule, SharedModule } from 'primeng/primeng';
  import { FileUploadModule } from 'primeng/primeng';
  import { DialogModule } from 'primeng/primeng';
  import { ChartModule } from 'primeng/primeng';
  import { ColorPickerModule } from 'ngx-color-picker';
  import { AccordionModule } from 'primeng/primeng';
  
  import { NotifyModalComponent } from '../shared/notify-modal.component';
  import { ErrorModalComponent } from '../shared/error-modal.component';
  import { UploadDownloadComponent } from '../shared/upload-download.component';
  import { HeaderComponent } from '../shared/header.component';
  import { BarChartComponent } from '../shared/bar-chart.component';
  import { PieChartComponent } from '../shared/pie-chart.component';
  import { EventNavigationComponent } from '../shared/event-navigation.component';
  import { EventTitleBannerComponent } from '../shared/event-title-banner.component';
  import { StandardFooterComponent } from '../shared/standard-footer.component';
  import { StandardNavigationComponent } from '../shared/standard-navigation.component';
  import { StandardReportDataComponent } from '../shared/standard-report-data.component';
  import { MisReportsFormComponent } from '../shared/mis-reports-form.component';
  import { StandardReportTotalsDataComponent } from '../shared/standard-report-totals-data.component';
  import { AuditLogFormComponent } from '../shared/audit-log-form.component';
  import { CreateEventBannerComponent } from '../shared/create-event-banner.component';
  import { LanguageSelectorComponent } from '../shared/language-selector.component';
  import { DisableButtonDuringAjax } from '../shared/disable-button-during-ajax.directive';
  
  import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
  import { TranslateHttpLoader } from "@ngx-translate/http-loader";
  import { TranslateService } from '@ngx-translate/core';
  
  
  
  
  
  @NgModule({
      imports: [
          CommonModule,
          FormsModule,
          ReactiveFormsModule,
          RouterModule,
          MyDatePickerModule,
          EditorModule,
          SharedModule,
          FileUploadModule,
          DialogModule,
          ChartModule,
          ColorPickerModule,
          AccordionModule,
          TranslateModule
      ],
      declarations: [
          NotifyModalComponent,
          ErrorModalComponent,
          UploadDownloadComponent,
          HeaderComponent,
          BarChartComponent,
          PieChartComponent,
          EventNavigationComponent,
          EventTitleBannerComponent,
          StandardFooterComponent,
          StandardNavigationComponent,
          StandardReportDataComponent,
          MisReportsFormComponent,
          StandardReportTotalsDataComponent,
          AuditLogFormComponent,
          CreateEventBannerComponent,
          LanguageSelectorComponent,
          DisableButtonDuringAjax
      ],
      exports: [
          NotifyModalComponent,
          ErrorModalComponent,
          UploadDownloadComponent,
          HeaderComponent,
          BarChartComponent,
          PieChartComponent,
          EventNavigationComponent,
          EventTitleBannerComponent,
          StandardFooterComponent,
          StandardNavigationComponent,
          StandardReportDataComponent,
          MisReportsFormComponent,
          StandardReportTotalsDataComponent,
          AuditLogFormComponent,
          CreateEventBannerComponent,
          LanguageSelectorComponent,
          DisableButtonDuringAjax,
          TranslateModule
      ]
  })
  export class SharedModuleForSite{
  
      constructor(private translate: TranslateService) {
  
  
      }
  
  }
  </code></pre>
  
  <p>and here is my "app.module":</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { routing } from "./app.routing";
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { MomentModule } from 'angular2-moment';
  import { MyDatePickerModule } from 'mydatepicker';
  import { EditorModule, SharedModule } from 'primeng/primeng';
  import { FileUploadModule } from 'primeng/primeng';
  import { DialogModule } from 'primeng/primeng';
  import { ChartModule } from 'primeng/primeng';
  import { ColorPickerModule } from 'ngx-color-picker';
  
  import { SharedModuleForSite } from './shared/shared.module';
  
  import { AppComponent } from './app.component';
  
  import { LoginComponent } from './login.component';
  import { NoEventsComponent } from './no-events.component';
  import { ReportsComponent } from './reports/reports.component';
  import { AddressReportsComponent } from './address-reports/address-reports.component';
  import { ForgottenPasswordComponent } from './forgotten-password.component';
  
  import { HttpService } from "./http.service";
  import { AuthGuard } from "./auth.guard";
  import { NotifyService } from "./notify.service";
  import { ErrorService } from "./error.service";
  import { BusyService } from "./busy.service";
  import { ReloadComponentService } from "./reload-component.service";
  import { DateFormatPipe } from 'angular2-moment';
  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  import { ProgressInterceptor } from "./progress.interceptor";
  
  import { HttpClient, HttpClientModule } from "@angular/common/http";
  import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
  import { TranslateHttpLoader } from "@ngx-translate/http-loader";
  
  
  export function HttpLoaderFactory(httpClient: HttpClient) {
      return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
  }
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      NoEventsComponent,
      ReportsComponent,
      AddressReportsComponent,
      ForgottenPasswordComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        routing,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MomentModule,
        MyDatePickerModule,
        EditorModule,
        SharedModule,
        FileUploadModule,
        DialogModule,
        ChartModule,
        ColorPickerModule,
        SharedModuleForSite
    ],
    providers: [
        HttpService,
        AuthGuard,
        NotifyService,
        ErrorService,
        BusyService,
        ReloadComponentService,
        DateFormatPipe,
        { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>