角度4.3インターセプタが動作しない

Question

すべてのリクエストに対してオーサリングヘッダを設定するために新しい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} 
    ] 
}) 

Answer 1

理由 - あなたは古いHttpサービスを使用します新しいサービスの代わりに、Angular 4.3 - HttpClient（Httpはgo廃止される予定です）。また、HttpClientでは、デフォルトでJSON応答タイプが仮定されているので、.map(contacts => contacts.json())とする必要があります。

... 
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

app.module.ts; DR はHttpClientModuleの輸入全体のアプリケーション（recommened）であることを確認してくださいまたはそれぞれに対して有効なインターセプタ構成を提供することができます（テストのみ）。

HttpClientModuleがアプリケーションの異なるモジュール間で何度もインポートされないようにしてください。私はそれを怠惰に読み込まれたモジュールにインポートしました。各インポートは、インポートされたモジュールの設定を使用してHttpClientの新しいコピーを作成し、ルートモジュールで提供されるインターセプタを上書きします。