Ionic Network原生插件缺失提供者报错问题求助

我前不久刚碰到一模一样的问题！你看到的NullInjectorError: No provider for Network!错误，核心原因是Ionic Native插件在Angular中需要手动注册提供者，尤其是Ionic 4+版本的项目里，这个步骤很容易被忽略。

具体解决步骤 #

1. 在AppModule中注册Network服务 #

打开项目根目录下的src/app/app.module.ts文件，完成两个操作：

• 导入Network模块
• 在providers数组中添加Network作为全局提供者

修改后的代码示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// 导入Network模块
import { Network } from '@ionic-native/network/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Network, // 在这里注册Network服务
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. 确认插件安装正确性 #

你已经执行了正确的安装命令，不过可以再重新执行一遍确保没有安装异常：

ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

你的Ionic 4.4.0和Angular 7.3.9版本和这些插件是兼容的，不用担心版本冲突问题。

3. 重要提醒：浏览器环境无法测试Cordova插件 #

需要注意的是，ionic serve是在浏览器中运行项目，而Cordova原生插件（包括Network）只能在真实移动设备或者模拟器中工作。即使你解决了提供者的问题，在浏览器里也无法获取真实的网络状态，测试功能的时候记得用以下命令在设备/模拟器中运行：

# Android设备/模拟器
ionic cordova run android

# iOS设备/模拟器
ionic cordova run ios

错误原因补充 #

在Angular的依赖注入系统中，任何要注入到组件的服务都必须被注册为提供者。Ionic Native插件本质上是封装了Cordova原生功能的Angular服务，所以必须在模块或者组件中声明它的提供者，Angular才能找到并注入它到你的HomePage组件中。

内容的提问来源于stack exchange，提问作者Lairg