Hi there,
I’ve been stuck at this issue with @ionic-native/network plugin for days and I’m unable to find a solution. I’m relatively new with Ionic, so excuse my code.
This is my Ionic info:
Ionic:
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
This is my 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"
]
}
}
I’ve imported the network module like this:
import {Network} from '@ionic-native/network';
The error I get is:
TS2749: 'Network' refers to a 'value', but it's being used as a 'type' here.
in
constructor(private network: Network, private toastController: ToastController, private plt: Platform)
Also when I adding the module to providers in app.module the error I get is:
TS2332: Type 'NetworkOriginal' is not assignable to type 'Provider'.
I read online that that’s due to the version of the package I’m using, so I tried to update to the latest version of @ionic-native/network as well and then import like this:
import {Network} from '@ionic-native/network/ngx';
That clears those errors and I can include it as a provider and also add it to constructor as a typeprivate network: Network, however when I try to use it like this:
this.network.onDisconnect().subscribe(() => {
if (this.status.getValue() === ConnectionStatus.Online) {
console.log('WE ARE OFFLINE');
this.updateNetworkStatus(ConnectionStatus.Offline);
}
});
I get this error:
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)
I’m really not sure what to do. I appreciate your help.