如何解决 NullInjectorError: No provider for HttpClient！ Ionic 4（Angular 8）中的问题

Posted 2023-03-10

【中文标题】如何解决 NullInjectorError: No provider for HttpClient！ Ionic 4（Angular 8）中的问题

【英文标题】：how to solve NullInjectorError: No provider for HttpClient! problem in Ionic 4 (Angular 8)

【发布时间】：2020-01-16 00:57:18

【问题描述】：

我已经实现了一个简单的 ionic 应用程序，它有一个调用 angular7-odooRpc 服务的页面，您可以在此处找到 angular7-odoo-jsonrpc ，但是当我调用 OdooRPCService 的构造函数时遇到了这个错误

错误错误：未捕获（承诺）：NullInjectorError：StaticInjectorError（AppModule）[OdooRPCService -> HttpClient]： StaticInjectorError（平台：核心）[OdooRPCService -> HttpClient]： NullInjectorError：没有 HttpClient 的提供者！ NullInjectorError: StaticInjectorError(AppModule)[OdooRPCService -> HttpClient]: StaticInjectorError（平台：核心）[OdooRPCService -> HttpClient]： NullInjectorError：没有 HttpClient 的提供者！ 在 NullInjector.get (core.js:778) 在 resolveToken (core.js:2564) 在 tryResolveToken (core.js:2490) 在 StaticInjector.get (core.js:2353) 在 resolveToken (core.js:2564) 在 tryResolveToken (core.js:2490) 在 StaticInjector.get (core.js:2353) 在 resolveNgModuleDep (core.js:26403) 在 NgModuleRef_.get (core.js:27491) 在 resolveNgModuleDep (core.js:26403) 在 resolvePromise (zone-evergreen.js:797) 在 resolvePromise (zone-evergreen.js:754) 在 zone-evergreen.js:858 在 ZoneDelegate.invokeTask (zone-evergreen.js:391) 在 Object.onInvokeTask (core.js:34182) 在 ZoneDelegate.invokeTask (zone-evergreen.js:390) 在 Zone.runTask (zone-evergreen.js:168) 在 drainMicroTaskQueue (zone-evergreen.js:559)

在我的应用程序模块文件中，我导入了 HttpClientModule 并将其添加到 @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  

【问题讨论】：

你能添加你的 app.module.ts 代码吗？

您是否检查过您正在导入正确的HttpClient？有时它可以自动推荐来自其他包的包，如selenium-webdriver\HttpClient?你要的是import HttpClient from '@angular/common/http';

这很奇怪，因为我去了 npm 包中列出的github repo，搜索了httpclient，结果返回为零，它在 OdooRPC... 存储库中不存在，所以我认为它必须在您的代码中的其他地方？

抱歉，到目前为止我的建议都是错误的。我确实在 Github 上搜索了结果，它得出了零代码结果，但现在我再次尝试并意识到它在代码结果选项卡上显示“我们无法搜索分叉存储库”。我可以看到该模块显然确实使用了 HttpClient。

很高兴您找到了某种解决方法，因为我遇到了死胡同。我研究了@inject 并查看了包，但 httpclient 应该在 package.json 中的 common 里面，我想不出还有什么可以尝试的

【参考方案1】：

我找到了一个更好的解决方案，我删除了服务的所有文件并创建了一个新服务（odooRPC.service.ts）并将 odoorpc.service.ts 的内容复制到 odooRPC.service.ts（然后工作完美，因为他们使用位于项目文件夹下 node_modules 的 HttpClient）

【讨论】：

你能分享你工作的代码吗？因为我也有同样的问题。

对不起，我完全改变了计划，因为 odoo 7 不能有效地处理 JsonRPC（我在处理会话和 CORS 时遇到了很多问题），这就是为什么我在两者之间构建了一个 REST API使用 XMLRPC 将 odoo API 与我构建的 REST API 连接

【参考方案2】：

我找到了一个对我有帮助的解决方法， OdooRPCService.ts 中使用的 HttpClient 对象位于 OdooRPCService 文件夹内的 node_modules 下，它是使用依赖注入声明的。 解决方案是：我从外部将 httpclient 对象传递给 OdooRPCService 的构造函数。

【讨论】：

添加一个 sn-p 代码将帮助下一个遇到此问题的人。

我找到了一个更好的解决方案，我删除了服务的所有文件并创建了一个新服务（odooRPC.service.ts）并将odoorpc.service.ts的内容复制到odooRPC.service .ts（这很完美，因为它们使用位于项目文件夹下 node_modules 中的 HttpClient）