Angular5にアップデートしてHttpモジュールを変更するゾ

こんにちは🍣
ゴーリスト開発の飯尾です

Angular4.3以下から5にアップデートするとき
Httpクライアントモジュールは @angular/http が非推奨になったので
@angular/common/http を使うように変更しました

どんなかんじに書き換えたのかまとめてみました

Before

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { MyResponse } from '../entity/my-response';

@Injectable()
export class RequestService {

  constructor(private http: Http) { }

  public post(params: string): Observable<any> {
    const headers: Headers = new Headers({
      'Content-Type': 'application/json',
      'dataType': 'json'
    });
    const options: RequestOptions = new RequestOptions({headers: headers});
    return this.http.post(REQUEST_URL, params, options)
      .map((res: Response) => {
        return new MyResponse(res.json());
      });
  }

}

After

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { MyResponse } from '../entity/my-response';

@Injectable()
export class RequestService {

  constructor(private http: HttpClient) { }

  public post(params: string): Observable<any> {
    return this.http.post<MyResponse>(REQUEST_URL, params);
  }

}

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const req = request.clone({
      setHeaders: {
        'Content-Type': 'application/json',
        'dataType': 'json'
      }
    });
    return next.handle(req);
  }
}