Search code examples
angularodooionic4angular8

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


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


Solution

  • 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)