Ionic 3 - 网络信息插件 - Object(...) is not a function(...)答案

【问题标题】：Ionic 3 - network-information plugin - Object(...) is not a function(…)Ionic 3 - 网络信息插件 - Object(...) is not a function(...)
【发布时间】：2019-07-18 13:39:41
【问题描述】：

我需要在 ionic 3 angular 4 项目中实现网络信息插件。我已经使用

安装了一个网络插件

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

安装后，我在 app.component.ts 中使用了这个插件，但我收到了一个错误，因为

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function(...) 在设备或模拟器上。

我正在分享我在此应用中使用的本机内核和插件版本。

"@ionic-native/core": "5.0.0"
"@ionic-native/network": "5.0.0"
"cordova-plugin-network-information": "2.0.1"

请注意： 我已经尝试升级"@ionic-native/core" to "5.2.0" 和"@ionic-native/network" to "5.2.0"。但是问题没有解决。

在这里，我无法降级插件 npm 版本或 "@ionic-native/core" to "4.2.0"，因为我在此应用中使用了许多插件，这些插件在 @ 版本“5.0.0”时运行良好。

下面是我的 app.component.ts

import { Network } from '@ionic-native/network/ngx';
...
constructor(private network: Network) {
    this.platform.ready().then(() => {
        // watch network for a disconnection
        let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            console.log('network disconnected!');
        });
    })
}

下面是我的 package.json

"dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    ...
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/network": "^5.0.0",
    ...
    "cordova-android": "7.1.4",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-network-information": "2.0.1",
    "ionic-angular": "^3.9.2",
  }

以下是我的开发系统资料

Ionic:
    ionic (Ionic CLI)  : 4.3.1 (/usr/local/lib/node_modules/ionic)
    Ionic Framework    : ionic-angular 3.9.2
    @ionic/app-scripts : 3.2.1

Cordova:
   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins

System:
   Android SDK Tools : 26.1.1 (/Users/###/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v8.11.3 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

有人遇到过这个问题吗？请帮助我，因为没有网络插件我无法继续前进。感谢您的宝贵时间。

【问题讨论】：

标签： angular ionic-framework ionic3 ionic-native

【解决方案1】：

自 Ionic 4 发布以来，为 Ionic 3 安装 Ionic Native 需要您添加 @4 以获取最新的兼容版本。在这种情况下，以及所有其他涉及 Ionic 3 的情况下，您应该这样做

npm install @ionic-native/network@4

对于网络，

npm install --save @ionic-native/barcode-scanner@4

对于条码扫描器，

npm install --save @ionic-native/network@4, 
npm install --save @ionic-native/bluetooth-le@4

对于蓝牙LE。

【讨论】：

【解决方案2】：

问题是您正在使用适用于 Ionic 版本 4 的 /ngx 导入。如果您阅读 changelog，您将看到版本 5 及更高版本 Requires Angular 7.1 and TypeScript 3.1。

尝试像这样将插件降级到 4.20.0：

npm uninstall @ionic-native/network

那么 npm install @ionic-native/network@4.20.0

并像这样在导入中删除 ngx： import { Network } from '@ionic-native/network';

【讨论】：