Açısal 4.3 Interceptor çalışmıyor

Question

Tüm istekler için authorithation üstbilgisini ayarlamak için yeni Angular 4.3 interceptors kullanmaya çalışıyorum. Ancak, çalışmıyor. intercept interceptors içine kesme noktası belirledim ve tarayıcı isabet etmedi, bu yüzden angular sadece benim önleyicimi yok sayar gibi görünüyor. Lütfen bana yardım edin, şimdiden teşekkürler.

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} 
    ] 
}) 

Answer 1

nedeni - Eski Http servisini kullanmak Angular 4.3 - HttpClient (Http başladı) yeni hizmet yerine kullanımdan kaldırılmak). Ayrıca, HttpClient JSON yanıt türü varsayılan olarak kabul edilir, bu nedenle .map(contacts => contacts.json()) ommit gerekir.

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'); 
    } 
} 

Answer 2

TL; DR tüm app HttpClientModule biri ithalat olduğundan emin olun (Önermekteyiz) veya her biri için geçerli önleme yapılandırması sağlayın (yalnızca sınama için).

HttpClientModule uygulamasının farklı modüller arasında birden fazla kez alınmadığından emin olun. Tembel yüklü modüller halinde ithal ettim. Her içe aktarma, içe aktarıldığı modülden yapılan yapılandırmayı kullanarak HttpClient'in yeni bir kopyasını oluşturur, böylece bir kök modülde bulunan ara belleklerin üzerine yazılır.