AngularでHttpサービスを利用する4つの方法 〜「No provider for Http」エラーはもう怖くない!〜
Angularで発生する「No provider for Http」エラーの原因と解決方法
このエラーを解決するには、以下の原因と解決方法を理解する必要があります。
原因
このエラーが発生する主な原因は以下の2つです。
-
Httpモジュールのインポート漏れ:
-
Httpサービスの注入漏れ:
解決方法
このエラーを解決するには、以下の方法を試してください。
-
@angular/httpモジュールのインポート:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
...
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
ngOnInit() {
this.http.get('https://api.github.com/users/angular')
.subscribe(response => {
console.log(response);
});
}
}
上記の方法で解決できない場合は、以下の点を確認してください。
@angular/core
モジュールのバージョンが古い場合、Http
モジュールをインポートする代わりに@angular/common/http
モジュールをインポートする必要があります。- TypeScriptのバージョンが古い場合、
Http
サービスの型にany
を指定する必要がある場合があります。
「No provider for Http」エラーは、Http
サービスが正しく注入されていないことが原因で発生します。上記の解決方法を参考に、エラーを解決してください。
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
ngOnInit() {
this.http.get('https://api.github.com/users/angular')
.subscribe(response => {
console.log(response);
});
}
}
このコードを実行すると、コンソールにGitHub APIからのレスポンスが出力されます。
AngularでHttpサービスを利用する他の方法
HttpClientモジュール
Angular 4.3以降では、@angular/common/http
モジュールに含まれるHttpClient
モジュールを使用することができます。HttpClient
モジュールはHttp
モジュールよりも新しいモジュールであり、より多くの機能を提供しています。
HttpClient
モジュールを使用するには、以下の手順が必要です。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule
],
...
})
export class AppModule { }
2. Http
サービスの代わりにHttpClient
サービスを注入します。
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('https://api.github.com/users/angular')
.subscribe(response => {
console.log(response);
});
}
}
RxJSを使用して、HTTPリクエストを処理することもできます。RxJSは、非同期処理を扱うためのライブラリです。
RxJSを使用してHTTPリクエストを処理するには、以下の手順が必要です。
- RxJSをインストールします。
npm install rxjs
rxjs/add/operator/map
とrxjs/add/operator/catch
をインポートします。
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
Observable
オブジェクトを作成して、HTTPリクエストを発行します。
import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
const http = new Http();
const observable = Observable.fromPromise(http.get('https://api.github.com/users/angular').toPromise());
observable.map(response => response.json())
.catch(error => Observable.throw(error))
.subscribe(response => {
console.log(response);
});
その他のライブラリ
AngularでHTTPリクエストを処理するために使用できるライブラリは、他にもたくさんあります。
AngularでHttpサービスを利用する方法は、上記で紹介した方法以外にもいくつかあります。それぞれの方法の特徴を理解して、自分に合った方法を選択してください。
angular