Property 'http' does not exist on type 'Component', Angular 2

Question

I'm new in angular2 and typescript and already spent a half day to figure out with ng2 forms. I have finished all my routes and builded all necessary form and currently trying to understand how to post in angular2 with typescript

This my error:

ERROR in [default] simpleapp/src/app/clients/add-client/add-client.component.ts:52:16 Property 'http' does not exist on type 'AddClientComponent'.

And I cannot find where is this problem coming from. I've imported angular/http in my component, I have provided header and response as oficial tutorial says but still can see this problem. What am I missing and where is my problem? thanks in advance

This is my component:

import 'rxjs/add/operator/map';

import {Component} from '@angular/core';
import {Http, Response, RequestOptions, Headers} from '@angular/http';

import {Employee} from "./model/add-client.model";

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

export class AddClientComponent {

   departments: Array<any>;
   firstName: '';
   lastName: '';
   id: null;
   salary: null;
   phone: null;
   departmentId: null;

  constructor(http: Http) {
    http.get('api/departments')
      .map((res: Response) => res.json())
      .subscribe((departments: Array<any>) => this.departments = departments);
  }

  model = new Employee(
    this.id,
    this.firstName,
    this.lastName,
    this.salary,
    this.departmentId,
    this.phone
  );

  submitted = false;

  addEmployee = 'api/employees'

  handleError = 'Post Error';

  onSubmit(model) {
    this.submitted = true;

    let body = JSON.stringify({ model });
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.addEmployee, body, options)
      .catch(this.handleError);

  }
}

This is my template:

    <div class="container">
    <md-card class="demo-card demo-basic">
      <md-card-title color="primary back-header">Employee Form</md-card-title>
      <md-card-content>
        <form (ngSubmit)="onSubmit(model)" #employeeForm="ngForm">
          <md-toolbar for="firstName">First Name</md-toolbar>
          <md-input
            class="demo-full-width input-text"
            type="text"
            id="firstName"
            required
            [(ngModel)]="model.firstName"
            name="firstName"
            #firstName="ngModel">
          </md-input>

          <md-toolbar for="lastName">Last Name</md-toolbar>
          <md-input
            class="demo-full-width input-text"
            type="text"
            id="lastName"
            required
            [(ngModel)]="model.lastName"
            name="lastName"
            #lastName="ngModel">
          </md-input>

          <md-toolbar for="salary">Salary</md-toolbar>
          <md-input
            class="demo-full-width input-text"
            type="number"
            id="salary"
            placeholder="USD"
            required
            [(ngModel)]="model.salary"
            name="salary"
            #salary="ngModel">
          </md-input>

          <md-toolbar for="departmentId">Department</md-toolbar>
            <select class="demo-full-width option-department input-text"
                    id="departmentId"
                    required
                    [(ngModel)]="model.departmentId"
                    name="departmentId"
                    #departmentId="ngModel">
              <option
                *ngFor="let department of departments"
                [value]="department.id">{{department.name}}
              </option>
            </select>

          <md-toolbar for="phone">Phone</md-toolbar>
          <md-input
            class="demo-full-width input-text"
            type="number"
            id="phone"
            placeholder="phone #"
            required
            [(ngModel)]="model.phone"
            name="phone"
            #phone="ngModel">
          </md-input>

          <button  md-raised-button color="primary"
                   type="submit"
                   class="btn btn-default"
                   [disabled]="!employeeForm.form.valid">Submit
          </button>
        </form>
      </md-card-content>
    </md-card>
  <md-card [hidden]="!submitted">
      <md-card-title>You submitted the following:</md-card-title>
    <md-list>
      <md-list-item>
        <label>First Name:</label> {{model.firstName}}
      </md-list-item>
      <md-list-item>
        <label>Last Name:</label> {{model.lastName}}
      </md-list-item>
      <md-list-item>
        <label>Salary:</label> {{model.salary}}
      </md-list-item>
      <md-list-item>
        <label>Department:</label> {{model.departmentId}}
      </md-list-item>
      <md-list-item>
        <label>Phone:</label> {{model.phone}}
      </md-list-item>
    </md-list>
  </md-card>
</div>

This is my module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';


import { MaterialModule } from '@angular/material';
import {MdListModule} from '@angular/material/list';


import { AppComponent } from './app.component';
import { routing, appRoutingProviders }  from './app.routing';

//==============

import { ClientsComponent } from './clients/clients.component';
import { DepartmentsComponent } from './departments/departments.component';
import { AddClientComponent } from './clients/add-client/add-client.component';
import { AddDepartmentComponent } from './departments/add-department/add-department.component';

@NgModule({

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,

    MaterialModule.forRoot(),
    MdListModule.forRoot()
  ],

  declarations: [
    AppComponent,
    ClientsComponent,
    DepartmentsComponent,
    AddClientComponent,
    AddDepartmentComponent
  ],

  providers: [appRoutingProviders],

  bootstrap: [AppComponent]
})
export class AppModule { }

Stefan Svrkota · Accepted Answer · 2016-10-04 21:38:14Z

37

Just add private to make your Http instance available to your entire component:

constructor(private http: Http)

edited Oct 4, 2016 at 21:38

answered Oct 4, 2016 at 21:33

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefan Svrkota Over a year ago

@antonyboom Glad I could help. There are really good answers on the following links, I don't think I could give you better explanation than any of them: stackoverflow.com/questions/36147890/… and stackoverflow.com/questions/34574167/…

Logan H · Accepted Answer · 2016-10-04 21:35:19Z

1

It has something to do with your http variable try this

In your component.ts

constructor(http: Http) {
    http.get('api/departments')
      .map((res: Response) => res.json())
      .subscribe((departments: Array<any>) => this.departments = departments);
  }

You could try

constructor(private http: Http) {
    http.get('api/departments')
      .map((res: Response) => res.json())
      .subscribe((departments: Array<any>) => this.departments = departments);
  }

edited Oct 4, 2016 at 21:35

answered Oct 4, 2016 at 21:32

Logan H

3,4332 gold badges35 silver badges50 bronze badges

1 Comment

Igor Over a year ago

http is local to the constructor.

John Baird · Accepted Answer · 2016-10-04 21:33:11Z

0

You have to export the Http module in the module in the exports declaration.

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule, ],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, ]
})

answered Oct 4, 2016 at 21:33

John Baird

2,6761 gold badge17 silver badges34 bronze badges

Comments

Seema As · Accepted Answer · 2018-10-26 16:19:51Z

0

Issue error TS2339: Property 'http' does not exist on type 'FoodListComponent' solved by making http as private in constructor constructor(private http: Http) { this.http = http; }

edited Oct 26, 2018 at 16:19

answered Oct 26, 2018 at 16:10

Seema As

901 silver badge2 bronze badges

Comments

ibrahimgb · Accepted Answer · 2023-04-11 21:28:13Z

0

constructor(private http: HttpClient) {}

just use dependency injection so you can use it

The HttpClient is used to perform HTTP requests and it imported form @angular/common/http. The HttpClient is more modern and easy to use the alternative of HTTP. HttpClient is an improved replacement for Http. src

edited Apr 11, 2023 at 21:28

answered Apr 10, 2023 at 20:55

ibrahimgb

1,0918 silver badges14 bronze badges

2 Comments

Zsolt Meszaros Over a year ago

Please, don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. How is this better than the accepted answer? Is there a reason you're using HttpClient instead of Http? Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

ibrahimgb Over a year ago

that what worked for me, as i head the same problem, thought to share it. and HttpClient is used to perform HTTP requests and it imported form @angular/common/http. The HttpClient is more modern and easy to use the alternative of HTTP. HttpClient is an improved replacement for Http.

Collectives™ on Stack Overflow

Property 'http' does not exist on type 'Component', Angular 2

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related