CODEWITHSUNDEEP
angular
user3625947
user3625947

Reputation: 11

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

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 { }

Upvotes: 0

Views: 1132

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

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');
  }
}

Upvotes: 1

Related Questions