Ionic HttpClient inject error

Question

I'm new to Ionic and experiencing the following error when I inject HttpClient into my service class:

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CategoriesServiceProvider -> HttpClient]: StaticInjectorError(Platform: core)[CategoriesServiceProvider -> HttpClient]: NullInjectorError: No provider for HttpClient! Error: StaticInjectorError(AppModule)[CategoriesServiceProvider -> HttpClient]: StaticInjectorError(Platform: core)[CategoriesServiceProvider -> HttpClient]: NullInjectorError: No provider for HttpClient!

The error is triggered by the following Service class:

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

@Injectable()
export class CategoriesServiceProvider {
  apiURL = 'https://randomuser.me/api/?results=10';

  constructor(private http: HttpClient) {
    console.log('Hello CategoriesServiceProvider Provider');
  }

}

If I remove the HttpClient from the constructor, the error goes away.

And, the following is my app.module.ts code:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs';
import { CategoriesPage } from '../pages/categories/categories';
import { SubscriptionsPage } from '../pages/subscriptions/subscriptions';
import { CategoriesServiceProvider } from '../providers/categories-service/categories-service';

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    CategoriesPage,
    SubscriptionsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
    CategoriesPage,
    SubscriptionsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CategoriesServiceProvider
  ]
})
export class AppModule {}

Any insights will be appreciated.

mega6382 · Accepted Answer · 2019-04-01 11:16:56Z

2

Add import { HttpClientModule } from '@angular/common/http'; in your app module.

In imports, add HttpClientModule like:

imports: [
  BrowserModule,
  HttpClientModule,
  IonicModule.forRoot(MyApp)
]

edited Apr 1, 2019 at 11:16

mega6382

9,39217 gold badges52 silver badges73 bronze badges

answered Jul 24, 2018 at 3:15

mohammed afwan

513 bronze badges

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

Collectives™ on Stack Overflow

Ionic HttpClient inject error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related