Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Http]: StaticInjectorError Http

Question

Got this error

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Http]: 
  StaticInjectorError(Platform: core)[Http]: 
    NullInjectorError: No provider for Http!
Error: StaticInjectorError(AppModule)[Http]:

Here is code Service:

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

@Injectable({
  providedIn: 'root'
})
export class MakeService {

  constructor(private http: Http) { }

  getMakes() {
    return this.http.get('api/makes')
      .pipe(map((response) => response.json()));
  }
}

App Module

import { MakeService } from './services/make.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { VehicleFormComponent } from './vehicle-form/vehicle-form.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    VehicleFormComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'vehicles/new', component: VehicleFormComponent },
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  providers: [
    MakeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { MakeService } from '../services/make.service'; import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-vehicle-form', templateUrl: './vehicle-form.component.html', styleUrls: ['./vehicle-form.component.css'] }) export class VehicleFormComponent implements OnInit { makes; constructor(private makeService: MakeService) { } ngOnInit() { this.makeService.getMakes().subscribe(makes => { this.makes = makes; console.log("MAKES", this.makes); }); } } — user3625947, Jun 29 '19 at 13:56
Possible duplicate of [ERROR Error: StaticInjectorError(AppModule)\[UserformService -> HttpClient\]:](https://stackoverflow.com/questions/50013398/error-error-staticinjectorerrorappmoduleuserformservice-httpclient) — Kelvin Lai, Jun 29 '19 at 14:04

score 1 · Accepted Answer · answered Jun 29 '19 at 14:00

1

You seem to have mixed the syntaxes that were used for making Http Calls before Angular 4.3 and after Angular 4.3

Angular 4.3 and prior used to use Http and for that, HttpModule was required to be added.

You're most probably using Angular with a version greater than 4.3 and RxJS version greater than 5.5

You should use HttpClient. You just need this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class MakeService {

  constructor(private http: HttpClient) { }

  getMakes() {
    return this.http.get('api/makes');
  }
}

answered Jun 29 '19 at 14:00

SiddAjmera

38,129
5
72
110

And then i dont need to use .pipe(map((response) => response.json())); ? – user3625947 Jun 29 '19 at 14:09
Not at all. That's something that was needed in case of using `Http`. HttpClient extract the `json` response from the response body. So you don't really need to call `json()` on the `response` anymore. – SiddAjmera Jun 29 '19 at 14:10

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[Http]: StaticInjectorError Http

1 Answers1