0

The following is the fragments of code which I am using :

addorders.component.ts

import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/Http';
import {Headers} from '@angular/Http';
import 'rxjs/add/operator/map';




@Component({
  selector: 'app-addorders',
  templateUrl: './addorders.component.html',
  styleUrls: ['./addorders.component.css']
})

export class AddordersComponent implements OnInit {

  response;
  constructor(private http:Http) { }


.
. 
.
.
.

 post()
 {
    var json = JSON.stringify({productname:"Panasonic", price:100000});
    let header = new Headers();
    header.append('Content-Type','application/x-www-forms-urlencoded');
    this.http.post("http://localhost:3000/orders",json,{headers:header})
    .map(res=>res.json)
    .subscribe(data=>this.response=JSON.stringify(data))
 }



 select(c)
 {
    this.post();
 }




  ngOnInit() {
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AddordersComponent } from './addorders/addorders.component';
import {HttpModule} from '@angular/http'
import {Router,RouterModule} from '@angular/router';
import {FormsModule} from '@angular/forms'

//import { HttpClientModule, HttpClient } from '@angular/common/http'


@NgModule({
  declarations: [
    AppComponent,
    AddordersComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule,RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I get a blank page at the browser and a console log as

AppComponent.html:23 ERROR Error: StaticInjectorError[Http]: StaticInjectorError[Http]: NullInjectorError: No provider for Http! at NullInjector.get (core.js:993) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveToken (core.js:1281) at tryResolveToken (core.js:1223) at StaticInjector.get (core.js:1094) at resolveNgModuleDep (core.js:10878) at NgModuleRef.get (core.js:12110) at resolveDep (core.js:12608)

Why do I get this error even after adding the required code at app.module.ts ?

8
  • can you try chaning '@angular/Http'; to '@angular/http'; in the component file? Commented Dec 16, 2017 at 13:10
  • I changed '@angular/http' to '@angular/Http' in the app.modules.ts and got to remove the error in the console. Commented Dec 16, 2017 at 13:22
  • The paths should all be in lower case Commented Dec 16, 2017 at 13:24
  • stackoverflow.com/questions/37765525/… Commented Dec 16, 2017 at 13:25
  • 1
    No. HttpClient exists since Angular 4.3 (IIRC). Angular 2 is out of date. Upgrade. Commented Dec 16, 2017 at 14:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.