Angular 4.3 Перехватчик не работает

Я пытаюсь использовать новые перехватчики Angular 4.3 для настройки заголовка авторизации для всех запросов. Однако он не работает. Я установил точку останова в метод перехватчиков intercept, и браузер не ударил его, поэтому кажется, что angular просто игнорирует мой перехватчик. Пожалуйста, помогите мне, спасибо заранее.

user.service.ts:

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
import {Http} from "@angular/http";

@Injectable()
export class UserService {

  constructor(public http: Http) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts').map(contacts => contacts.json());
  }
}

token.interceptor.ts

import {Injectable} from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AuthService} from "./shared/auth.service";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

app.module.ts:

@NgModule({
  ...
  providers: [
    ...
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
  ]
})

Ответ 1

Причина - вы используете старую службу Http вместо новой службы, введенную в Angular 4.3 - HttpClient (Http будет устаревать). Кроме того, в HttpClient тип ответа JSON принимается по умолчанию, поэтому вы должны опустить .map(contacts => contacts.json()).

app.module.ts

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   HttpClientModule,
   ...
 ],
 providers: [
   ...
   {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
 ]
 ...
})

user.service.ts

...
import {HttpClient} from "@angular/common/http";

@Injectable()
export class UserService {

  constructor(public http: HttpClient) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts');
  }
}

Ответ 2

TL; DR Убедитесь, что есть один импорт HttpClientModule во всем приложении (рекомендуется) или предоставить действительную конфигурацию перехватчика для каждого из них (только для тестирования).

Убедитесь, что HttpClientModule не импортируется несколько раз в разные модули приложения. Я импортировал его в ленивые загружаемые модули. Каждый импорт создает новую копию HttpClient, используя конфигурацию из модуля, где он импортируется, поэтому перехватчики, предоставленные в корневом модуле, перезаписываются.

Ответ 3

Если вы уже проверили, используете ли вы сервис HttpClient, и импортируете ли вы только один раз HttpClientModule, но у вас все еще есть проблемы, проверьте это:

Если вы используете обеспечивает In: "root" и ваш сервис находится внутри модуля.

@Injectable({
  providedIn: 'root'
})
export class YourService {
    ...
}

Убедитесь, что вы не добавили сервис в массив провайдеров вашего модуля.

@NgModule({
  ...
  providers: [
    YourService, // REMOVE THIS LINE
  ]
})
export class YourModule { }

Это перезапишет ваши перехватчики для этой службы.