TypeScript
angular

Angular5でのjsonpの取扱

Angular2の時代に少しかじった程度なので、Angular5をいきなり使おうとしたら色々変わっていて困った。

HttpClientModuleとHttpClientJsonpModule

Angular4.3から追加されたモジュールらしい?
参考: Angular 4.3で追加されたHttpClientModuleについてのメモ

HttpClientJsonpModuleはHttpClientモジュールでjsonpをサポートするためにimportする必要があるモジュール
勉強不足のためどのような実装になっているかは分からない

基本的には下記の通りにNgModuleデコレータ無いで上記2モジュールをimportする必要がある。

import { NgModule } from '@angular/core';
import {HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';

@NgModule(
{...
imports: [...
HttpClientModule,
HttpClientJsonpModule,
...]
...
})
export class AppModule{ }

jsonpの受け取り方

DIされたHttpClientからjsonp関数を呼ぶことでjsonpオブジェクトを受け取る。
参考: Angular.io HttpClient#jsonp

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {tap} from 'rxjs/operators';

@Injectable()
export class HttpService {
  APIURL: string;
  constructor(private http: HttpClient) {}
  logData(param: HttpParams): void{
    this.http.jsonp<Object[]>(`$(this.APIURL)?${param.toString()}`, 'callback')
      .pipe(tap(console.log))
  } 

}

昔使ったことあるから楽だと思ってAngularを使ってみたが、以外と手間がかかった。
記事も少ないしReact使ったほうがいいのかな、分かりません