CODEWITHSUNDEEP
ionic-framework
sisko
sisko

Reputation: 9900

Ionic HttpClient inject error

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.

Upvotes: 1

Views: 1091

Answers (1)

mohammed afwan
mohammed afwan

Reputation: 51

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

In imports, add HttpClientModule like:

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

Upvotes: 2

Related Questions