how to solve NullInjectorError: No provider for HttpClient! problem in Ionic 4 (Angular 8)

Question

I have implemented a simple ionic application that has a page that calls a angular7-odooRpc service which you can find here angular7-odoo-jsonrpc , but i'm facing this error when i call the constructor of OdooRPCService

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[OdooRPCService -> HttpClient]: StaticInjectorError(Platform: core)[OdooRPCService -> HttpClient]: NullInjectorError: No provider for HttpClient! NullInjectorError: StaticInjectorError(AppModule)[OdooRPCService -> HttpClient]: StaticInjectorError(Platform: core)[OdooRPCService -> HttpClient]: NullInjectorError: No provider for HttpClient! at NullInjector.get (core.js:778) at resolveToken (core.js:2564) at tryResolveToken (core.js:2490) at StaticInjector.get (core.js:2353) at resolveToken (core.js:2564) at tryResolveToken (core.js:2490) at StaticInjector.get (core.js:2353) at resolveNgModuleDep (core.js:26403) at NgModuleRef_.get (core.js:27491) at resolveNgModuleDep (core.js:26403) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)

In my app module file i imported HttpClientModule and i added it to imports array inside @ngModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { OdooRPCService } from 'angular7-odoo-jsonrpc';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        FontAwesomeModule,
        HttpClientModule
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        OdooRPCService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Have you checked you are importing the correct HttpClient? Sometimes it can autosuggest ones from other packages like selenium-webdriver\HttpClient? The one you want is import { HttpClient } from '@angular/common/http'; — rtpHarry
Thats strange because I went to the github repo listed in the npm package, searched for httpclient and it came back with zero results, it doesn't exist in the OdooRPC... repo, so I assumed it must be somewhere else in your code? — rtpHarry
Sorry, my advice was all wrong up until now. I did search the results on Github, and it came up with zero code results but now I just tried it again and realised that it says on the code results tab "we cant search forked repos". I can see that the module clearly does use HttpClient. — rtpHarry
glad you found some kind of workaround as I had hit a dead-end. I research the @inject and looked at the packages, but httpclient should have been inside common which was in the package.json, and i couldnt think of anything else to try — rtpHarry

Random Random · Accepted Answer · 2019-09-16T14:12:03

I found a better solution, i deleted all the files of the service and i created a new service (odooRPC.service.ts) and i copied the content of odoorpc.service.ts to odooRPC.service.ts (and that works perfect because they use the HttpClient located in node_modules under the project folder)

how to solve NullInjectorError: No provider for HttpClient! problem in Ionic 4 (Angular 8)

2 Answers