@ionic-native/network 模块的问题答案

【问题标题】：Issue with @ionic-native/network module@ionic-native/network 模块的问题
【发布时间】：2019-09-08 02:31:27
【问题描述】：

我已经被@ionic-native/network 插件这个问题困扰了好几天了，我找不到解决方案。我对 Ionic 比较陌生，所以请原谅我的代码。我遵循的实现离线模式的指南是这样的： https://devdactic.com/ionic-4-offline-mode/

这是我的离子信息：


   Ionic CLI          : 5.2.6 (/usr/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.7.1
   @ionic/app-scripts : 3.2.4

Capacitor:

   Capacitor CLI   : not installed
   @capacitor/core : not installed

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 18 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/home/dimiftb/Android/Sdk)
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 6.9.0
   OS                : Linux 4.15

这是我的 package.json：

{
  "name": "test_location_app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@angular/router": "^4.4.3",
    "@ionic-native/background-mode": "^4.5.3",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/date-picker": "^4.5.2",
    "@ionic-native/diagnostic": "^4.5.3",
    "@ionic-native/geolocation": "^4.20.0",
    "@ionic-native/insomnia": "^4.5.3",
    "@ionic-native/local-notifications": "^4.5.3",
    "@ionic-native/location-accuracy": "^4.5.3",
    "@ionic-native/media": "^5.8.0",
    "@ionic-native/native-geocoder": "^4.20.0",
    "@ionic-native/network": "^4.20.0",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic-native/stepcounter": "^4.5.2",
    "@ionic/storage": "2.0.1",
    "chart.js": "^2.7.1",
    "cordova-android": "8.0.0",
    "cordova-plugin-background-mode": "0.7.2",
    "cordova-plugin-badge": "^0.8.7",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-geolocation": "4.0.1",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "2.1.3",
    "cordova-plugin-ionic-webview": "4.1.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-nativegeocoder": "^2.0.4",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-request-location-accuracy": "2.3.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-statusbar": "2.4.2",
    "cordova-plugin-stepcounter": "^1.0.1",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova.plugins.diagnostic": "5.0.0",
    "ionic-angular": "3.7.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "6.0.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.4",
    "typescript": "^2.1.0"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-device": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-stepcounter": {},
      "cordova-plugin-nativegeocoder": {},
      "cordova-plugin-insomnia": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-statusbar": {},
      "cordova-plugin-splashscreen": {},
      "cordova.plugins.diagnostic": {
        "ANDROID_SUPPORT_VERSION": "28.+"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "16.+"
      },
      "cordova-plugin-geolocation": {},
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-networkinterface": {}
    },
    "platforms": [
      "android",
      "browser"
    ]
  }
}

我已经像这样导入了网络模块：

import {Network} from '@ionic-native/network';

我得到的错误是：

TS2749: 'Network' refers to a 'value', but it's being used as a 'type' here.

在

constructor(private network: Network, private toastController: ToastController, private plt: Platform)

另外，当我将模块添加到 app.module 中的提供程序时，我得到的错误是：

TS2332: Type 'NetworkOriginal' is not assignable to type 'Provider'.

我在网上看到这是由于我使用的包的版本，所以我也尝试更新到最新版本的@ionic-native/network，然后像这样导入：

import {Network} from '@ionic-native/network/ngx';

这清除了这些错误，我可以将其作为提供者包含在内，并将其作为类型添加到构造函数中：

 private network: Network

但是当我尝试这样使用它时：

this.network.onDisconnect().subscribe(() => {
            if (this.status.getValue() === ConnectionStatus.Online) {
                console.log('WE ARE OFFLINE');
                this.updateNetworkStatus(ConnectionStatus.Offline);
            }
        });

我得到的错误是这样的：

Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at Network.onDisconnect (http://localhost:8100/build/vendor.js:104490:126)
    at NetworkService.webpackJsonp.174.NetworkService.initializeNetworkEvents (http://localhost:8100/build/main.js:446:22)
    at http://localhost:8100/build/main.js:439:19
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14356)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:4373:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14296)
    at r.run (http://localhost:8100/build/polyfills.js:3:9523)
    at http://localhost:8100/build/polyfills.js:3:19622
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15040)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4364:33)
    at c (http://localhost:8100/build/polyfills.js:3:19132)
    at http://localhost:8100/build/polyfills.js:3:19653
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15040)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4364:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:14961)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10214)
    at o (http://localhost:8100/build/polyfills.js:3:7274)
    at e.invokeTask [as invoke] (http://localhost:8100/build/polyfills.js:3:16203)
    at p (http://localhost:8100/build/polyfills.js:2:26993)
    at HTMLDocument.v (http://localhost:8100/build/polyfills.js:2:27238)

我真的不知道该怎么办。感谢您的帮助。

【问题讨论】：

因此，除非您使用的是 Ionic 4 / Angular 7+ 版本，否则您不应使用 /ngx 路由。在您的情况下，我认为您需要使用 5 版之前的 ionic 插件和 cordova 插件。
@SergeyRudenko 目前还没有 Ionic 的第 5 版。版本 5 指的是 Ionic CLI 工具，但这与问题无关。
如果您使用的是 ngx import route，这意味着您使用的是插件版本 5+，它与您的 cli 版本无关...
您正在使用 Ionic 3 并已将其标记为 Ionic3，但随后提到了很多 Ionic 4 的内容，例如您正在遵循的教程在 url 中说 Ionic 4，并提到使用 /ngx。这是不对的，基本上是一团糟。如果您在 Ionic 3 中工作，您需要做的是遵循 Ionic 3 教程。您要求我们做的是挑选一个被不兼容的框架和教程搞砸的应用程序，这是任何人都不应该做的事情。

标签： cordova ionic-framework ionic3

【解决方案1】：

这是在 Ionic 4 中使用网络模块的正确方法：

在app.module.ts 中导入模块并将其添加到您的提供程序：

import { Insomnia } from '@ionic-native/insomnia/ngx';

@NgModule({
    [...]
    providers: [
        Network
    ]
})

在您的页面组件中导入并注入模块：

import { Network } from '@ionic-native/network/ngx';

export class WhateverPageComponent {

    constructor(
        private network: Network
    ) {
        [...]
    }

订阅你想观察的网络事件，例如：

let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
    console.log('Network was disconnected');
});

let connectSubscription = this.network.onConnect().subscribe(() => {
    console.log('Network was connected');
});

【讨论】：

操作人员对此感到困惑，但我认为这对他们来说是不正确的，因为他们似乎正在使用 Ionic3 :)