Нет провайдера для Http StaticInjectorError

Я пытаюсь вытащить данные из своего api и заполнить его в своем ионном приложении, но он сбой при входе на страницу, на которую должны быть заполнены данные. Ниже приведены мои два файла.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)

Я не уверен, почему нет ошибки провайдера, поскольку это поставщик, созданный с помощью ионной структуры

Ответ 1

Чтобы использовать Http в вашем приложении, вам нужно добавить HttpModule в ваш app.module.ts:

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 в вашем массиве HttpClientModule imports:[]

Ответ 2

Обновление: Угловой v6+

Для приложений, конвертированных из более старых версий (Angular v2 - v5): HttpModule теперь устарел, и вам нужно заменить его на HttpClientModule, иначе вы также получите ошибку.

В вашем app.module.ts замените import { HttpModule } from '@angular/http'; с новым import { HttpClientModule} from "@angular/common/http"; HttpClientModule import { HttpClientModule} from "@angular/common/http"; Примечание. Обязательно обновите массив HttpModule imports[] модулей, удалив старый HttpModule и заменив его новым HttpClientModule.
В любой из ваших служб, которые использовали HttpModule, замените import { Http } from '@angular/http'; с новым import { HttpClient } from '@angular/common/http'; HttpClient import { HttpClient } from '@angular/common/http';
Обновите, как вы обрабатываете ваш Http-ответ. Например - если у вас есть код, который выглядит следующим образом

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

Приведенный выше пример кода приведет к ошибке. Нам больше не нужно анализировать ответ, потому что он уже возвращается как JSON в объекте конфигурации.

Обратный вызов подписки копирует поля данных в объект конфигурации компонента, который привязан к данным в шаблоне компонента для отображения.

Для получения дополнительной информации смотрите - Angular HttpClientModule - Официальная документация

Ответ 3

Вам также необходимо импортировать HttpClientModule из Angular '@angular/common/http' в ваш основной AppModule для выполнения HTTP-запросов.

app.module.ts

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

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

Ответ 4

Добавьте эти два файла в ваш app.module.ts

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

после этого объявить это в провайдере..

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

Это работа для меня.

Ответ 5

В ionic 4.6 я использую следующую технику, и она работает. Я добавляю этот ответ, чтобы, если кто-то сталкивался с подобными проблемами в новой версии ионной версии, это могло бы помочь им.

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]
})

Это!

Ответ 6

Я нахожусь на угловом проекте, который (к сожалению) использует включение исходного кода через 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 */
    },
  ]
  ...

Ответ 7

Я пытался решить проблему в течение часа и просто попытался перезагрузить сервер. Только чтобы увидеть, что проблема исправлена.

Если вы вносите изменения в модуль APP и проблема остается той же, остановите сервер и попробуйте снова выполнить команду serve.

Использование ионного 4 с угловым 7