web-dev-qa-db-ja.com

Http StaticInjectorErrorのプロバイダーはありません

APIからデータを取得してionicアプリに入力しようとしていますが、データを入力するページに入るとクラッシュします。以下は私の2つの.tsファイルです。

import { Component } from '@angular/core';

import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  data: any;
  loading: any;

  constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: `
        <ion-spinner></ion-spinner>`
    });
    this.getdata();
  }

  getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
      result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        this.loading.dismiss();
        console.log('getData completed');
     }
   );
 }
}

および他のファイル：

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  getJsonData() {
    // return Promise.resolve(this.data);

     return this.http.get('url').map(res => res.json());
   }

}

HttpModuleも使用してみましたが、致命的なエラーです。エラーは次のとおりです。

Error: Uncaught (in promise): Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]: 
  StaticInjectorError[Http]: 
    NullInjectorError: No provider for Http!
    at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)

これはionicフレームワークを通じて作成されたプロバイダーであるため、なぜプロバイダーエラーがないのかわかりません

angulartypescriptionic-framework
52
Drew

アプリでHttpを使用するには、app.module.tsにHttpModuleを追加する必要があります。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ]

編集

以下のコメントで述べたように、HttpModuleはdeprecatedです。今ではimport { HttpClientModule } from '@angular/common/http';を使用してください。 HttpClientModuleがimports:[]配列であることを確認してください

104
Sajeetharan - MSFT

更新：Angular v6 +

古いバージョンから変換されたアプリの場合（Angular v2-v5）：HttpModuleは非推奨になったため、HttpClientModuleに置き換える必要があります。そうしないと、エラーも発生します。

  1. app.module.tsで、import { HttpModule } from '@angular/http';を新しいHttpClientModule import { HttpClientModule} from "@angular/common/http";に置き換えます注：古いHttpModuleを削除して新しいHttpClientModuleに置き換えて、モジュールimports[]配列を更新してください。
  2. HttpModuleを使用したサービスで、import { Http } from '@angular/http';を新しいHttpClient import { HttpClient } from '@angular/common/http';に置き換えます

  3. Http応答の処理方法を更新します。たとえば、次のようなコードがある場合

    http.get('people.json').subscribe((res:Response) => this.people = res.json());

上記のコード例はエラーになります。応答はすでにconfigオブジェクトでJSONとして返されているため、応答を解析する必要がなくなりました。

サブスクリプションコールバックは、データフィールドをコンポーネントの構成オブジェクトにコピーします。これは、表示用のコンポーネントテンプレートでデータバインドされます。

詳細については、- Angular HttpClientModule-Official Documentation を参照してください。

33
Narm

また、HTTP要求を作成するために、Angular '@angular/common/http'からHttpClientModuleをメインAppModuleにインポートする必要があります。

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { ServiceService } from '../../../services/service.service';

@NgModule({
   imports: [
       HttpClientModule
   ],
   providers: [
       ServiceService
   ]
})
export class AppModule {...}
6
Gunjan Kumar

これらの2つのファイルをapp.module.tsに追加します

import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

その後、これらをプロバイダーで宣言します。

providers: [
    Api,
    Items,
    User,
    Camera,
    File,
    FileTransfer];

これは私の仕事です。

0
Rajiv Pandey

私は約1時間この問題を修正しようとしていましたが、ちょうどrestartに限定されました。問題を確認するだけで修正されます。

APPモジュールに変更を加えても問題が変わらない場合は、サーバーを停止して、再度serveコマンドを実行してください。

ionic 4とangular 7の使用

0
Lasithds

私はangularプロジェクトにいます。（残念ながら）tsconfig.jsonを介してソースコードの包含を使用して、さまざまなコードのコレクションを接続します。サービスの同様のStaticInjectorエラー（上の例の[RestService）に遭遇しました。影響を与えるときにdeps配列にサービスの依存関係をリストすることで修正できましたモジュール内のサービス、たとえば：

import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RestService } from 'mylib/src/rest/rest.service';
...
@NgModule({
  imports: [
    ...
    HttpModule,
    ...
  ],
  providers: [
    {
      provide: RestService,
      useClass: RestService,
      deps: [HttpClient] /* the injected services in the constructor for RestService */
    },
  ]
  ...
0
tedw

ionic 4.6では、次の手法を使用して動作します。誰かが新しいionicバージョンのアプリで同様の問題に直面している場合に役立つように、この回答を追加しています。

i）app.module.tsを開き、次のコードブロックを追加してHttpModuleとHttpClientModuleをインポートします

import { HttpModule } from '@angular/http';
import {   HttpClientModule } from '@angular/common/http';

ii）@NgModuleインポートセクションで以下の行を追加します。

HttpModule,
HttpClientModule,

したがって、私の場合、@ NgModuleは次のようになります。

@NgModule({
  declarations: [AppComponent ],
  entryComponents: [ ],
  imports: [
    BrowserModule,
    HttpModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule, 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

それでおしまい！

0
Phan Hero