Uncaught (in promise): Error: No provider for Http

i’m new to ionic.
I got an error Uncaught (in promise): Error: No provider for Http!,
login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http ,Headers } from '@angular/http';
import 'rxjs/add/operator/map';
/** * Generated class for the Login page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. 
*/
@IonicPage()
@Component({  selector: 'page-login',  templateUrl: 'login.html',})
export class Login {
  constructor(public navCtrl: NavController, public navParams: NavParams,public http:Http) {  }
  ionViewDidLoad() {   
 console.log('ionViewDidLoad Login'); 
 } 
 ionViewidData(){ 
   let headers= new Headers();   
 headers.append('Content-Type','application/json');
    let body = {      id:"10077",      password:"leechan2"    };  
  console.log(body);    
this.http.post('http://0.0.0.0:2800/login',JSON.stringify(body),{headers:headers});  }
}

login.html

ion-content class="background">  <ion-card>    <ion-card-header>      Login Form    </ion-card-header>    <ion-card-content>      <ion-list no-line>        <ion-item>          <ion-input type="text" placeholder="Username"></ion-input>        </ion-item>        <ion-item>          <ion-input type="password" placeholder="Password"></ion-input>        </ion-item>                <button ion-button block outline color="light" (click)="ionViewidData()">Log in</button>        <p>OR</p>        <a>Don't have a Account? <b>Sign up</b></a>        <button ion-button block color="facebook">          <ion-icon name="logo-facebook"></ion-icon> Login with facebook        </button>      </ion-list></ion-card-content>  </ion-card>  <button class="bottom" ion-button clear full color="light">Don't have an account? Sign up</button></ion-content>


Hi,

I think it has to do with Ionic 3.

See this thread

The point is that you have to be sure that your file ‘app.module.ts’ imports Angular’s HttpModule.

So import HttpModule in the ‘app.module.ts’ like this

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

Then update your ‘imports’ (in app.module.ts) like this to consider providers related to ‘@angular/http’

imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
5 Likes

3 posts were split to a new topic: Send and receive a data in post method

Thanks worked for me :slight_smile: