[Angular]"No provider for xxx"エラーが発生するときの対処法

カテゴリ: Angular

発生したエラー

app.component.tsで、コンストラクタにHttp型の引数を指定するとNo provider for Http!エラーが発生した

エラー内容

ERROR Error: No provider for Http!
    at injectionError (reflective_errors.ts:71)
    at noProviderError (reflective_errors.ts:105)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141)
    at resolveDep (provider.ts:517)
    at createClass (provider.ts:372)
    at createDirectiveInstance (provider.ts:192)

プログラム

import { Http } from '@angular/http';

@Component({
  ...
})

export class AppComponent {
  constructor(private http: Http) {   // ここで引数を指定するとエラーになる

  }
}

原因

app.module.tsでHttpModuleモジュールのインポートが必要だったにもかからず、インポートしていなかった。

対処法

app.module.tsへ以下のようにHttpModuleのインポートを追加したところ、エラーが解消した

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from "@angular/http";               // 追加
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],               // 追加
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
こちらもおススメ

One thought on “[Angular]"No provider for xxx"エラーが発生するときの対処法

コメントを残す

メールアドレスが公開されることはありません。