Перехватчик не перехватывает, несмотря на только один HttpClientModule

Question

У меня есть приложение в Angular, и у меня есть только один HttpClientModule, но когда я предоставляю HttpClient в конструкторе, например:

export class UserService {

constructor(private http: HttpClient /** <---- this one is ok, and requests are intercepted */) {
    const i='i'; 
}

, но в другом модуле у меня также есть аналогичный конструктор

export class TableComponent implements OnInit {

  ...
  ...
  constructor(private http: HttpClient /** <---- this one is not ok, and requests are  not intercepted */) {

  }

Мой app.module

@NgModule({
  declarations: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorRefresh,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    MainAppModule,
    TableModule,

Содержимое модуля таблицы

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TableHeaderComponent} from './table-header/table-header.component';
import {TableComponent} from './table/table.component';
import {TablePaginationComponent} from './table-pagination/table-pagination.component';
import {TableFilterComponent} from './table-filter/table-filter.component';

@NgModule({
  declarations: [TableHeaderComponent, TableComponent, TablePaginationComponent, TableFilterComponent],
  imports: [
    CommonModule,
  ],
  exports: [TableHeaderComponent, TableComponent, TablePaginationComponent, TableFilterComponent],
})
export class TableModule {
}

MainAppModule

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UsersComponent} from './users/users.component';
import {MainAppRoutingModule} from './main-app-routing.module';
import {LayoutComponent} from './layout/layout.component';
import {ThemeModule} from '../../@theme/theme.module';
import {NbCardModule} from '@nebular/theme';
import {Ng2SmartTableModule} from 'ng2-smart-table';
import {TableModule} from '../table/table.module';

@NgModule({
  declarations: [UsersComponent, LayoutComponent],
  imports: [
    CommonModule, MainAppRoutingModule, ThemeModule, NbCardModule, Ng2SmartTableModule, TableModule,
  ],
})
export class MainAppModule {
}

Что я делаю не так?

Answer 1

Импортируйте HttpClientModule только один раз в ваше приложение и предоставляйте перехватчики в одном и том же месте.

В соответствии с документами :

Поскольку перехватчики (необязательно) ) зависимости службы HttpClient, вы должны предоставить их в том же инжекторе (или родительском элементе инжектора), который предоставляет HttpClient. Перехватчики, предоставляемые после того, как DI создает HttpClient, игнорируются.

Answer 2

Я думаю, что ваша проблема с внедрением службы.

Я оставлю здесь пример, чтобы вы могли сравнить.

Родительский модуль (AppModule) импортирует HttpClientModule и дочерний модуль

@NgModule({
  declarations: [AppComponent],
  providers: [ChildService],
  imports: [AppRoutingModule, BrowserModule, HttpClientModule, ChildModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Дочерний модуль будет перехватывать запросы http, поэтому служба, которая выполняет эти запросы, должна быть внедрена в этот модуль.

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }
  ]
})
export class ChildModule {}

Служба должна получить зависимость HttpClient.

@Injectable({
  providedIn: ChildModule
})
export class {
  constructor(private _http: HttpClient) {}
}

И перехватчик должен выглядеть примерно так:

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
  private token = "";
  constructor(private router: Router, private tokenStore: TokenStoreService) {
    this.token = "fake-token";
  }

  intercept<T>(
    req: HttpRequest<T>,
    next: HttpHandler
  ): Observable<HttpEvent<T>> {
    const authHeader = { Authorization: "Basic " + this.token };
    const authReq = req.clone({ setHeaders: authHeader });
    return next.handle(authReq);
  }
}

Надеюсь, это вам помогло:)