Ionic 2 app not installing @ionic-native/network

Ionic Native
1

I’m trying to use cordova-plugin-network-information and @ionic-native/network in my ionic 2 app. However, I get the following error when trying to execute npm install --save @ionic-native/network.

npm WARN @ionic-native/network@3.8.1 requires a peer of @ionic-native/core@^3.6.0 but none was installed.
npm WARN @ionic-native/network@3.8.1 requires a peer of rxjs@^5.0.1 but none was installed.
How do I fix this? Do I need to upgrade to ionic 3?

2

At a minimum, you need to install @ionic-native/core >=3.6.0 in order to get an important common base class. To say more, I think people would need to see your package.json.

3

Thanks for your answer. However, it seems like I’m now in a loop. I did the following:

  • npm install --save @ionic-native/core@3.6.0 and received @ionic-native/core@3.6.0 requires a peer of rxjs@^5.0.1

  • npm install rxjs@^5.0.1 and received npm WARN @angular/core@2.2.1 requires a peer of rxjs@5.0.0-beta.12 but none was installed

Below is my package.json.

“dependencies”: {
"@angular/common": “2.2.1”,
"@angular/compiler": “2.2.1”,
"@angular/compiler-cli": “2.2.1”,
"@angular/core": “2.2.1”,
"@angular/forms": “2.2.1”,
"@angular/http": “2.2.1”,
"@angular/platform-browser": “2.2.1”,
"@angular/platform-browser-dynamic": “2.2.1”,
"@angular/platform-server": “2.2.1”,
"@ionic-native/core": “^3.6.0”,
"@ionic-native/network": “^3.8.1”,
"@ionic/storage": “1.1.7”,
“cordova-android”: “^6.2.3”,
“cordova-plugin-console”: “^1.0.5”,
“cordova-plugin-device”: “^1.1.4”,
“cordova-plugin-inappbrowser”: “^1.5.0”,
“cordova-plugin-ms-azure-mobile-apps”: “^2.0.0”,
“cordova-plugin-network-information”: “^1.3.3”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “^2.2.1”,
“cordova-plugin-whitelist”: “^1.3.1”,
“cordova-sqlite-storage”: “^2.0.4”,
“ionic-angular”: “2.0.0”,
“ionic-native”: “2.4.1”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “^5.0.1”,
“sw-toolbox”: “3.4.0”,
“zone.js”: “0.6.26”
},
“devDependencies”: {
"@ionic/app-scripts": “1.0.0”,
“typescript”: “2.0.9”
},
“cordovaPlugins”: [
“cordova-plugin-whitelist”,
“cordova-plugin-console”,
“cordova-plugin-statusbar”,
“cordova-plugin-device”,
“ionic-plugin-keyboard”,
“cordova-plugin-splashscreen”
],
“cordovaPlatforms”: [],
“description”: “SidemenuTabs: An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-ms-azure-mobile-apps”: {},
“cordova-sqlite-storage”: {},
“cordova-plugin-console”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-whitelist”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-network-information”: {}
},
“platforms”: [
“android”
]

Thank you again.

4

Obviously my primary recommendation is to update everything to the latest supported version, but if you’re not going to do that, you are probably safe sticking with the higher version of rxjs and telling your old Angular to just live with it.

5

Is there an easy way to update everything or an article that provides best practices for updating?

6

The framework CHANGELOG is the best resource I know of.

7

Thanks, I made it a step further. I updated everything using instructions from the framework Changelog. Easy enough! However, now I’m getting the following exception when referencing Network on my HomePage…

EXCEPTION: Error in ./TabsPage class TabsPage - inline template:0:0 caused by: No provider for Network!
ORIGINAL EXCEPTION: No provider for Network!
ORIGINAL STACKTRACE:
Error: No provider for Network!

Below is my HomePage.ts code…

import { Component } from '@angular/core';
import { Network } from '@ionic-native/network'; 
import { NavController, AlertController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, 
              public network: Network, // runs when commented out
              public platform: Platform) {

    this.platform = platform;
   
    this.platform.ready().then(() => {
      // var networkState = network.type;
    });
  }
}

I’m using tabs and the exception says ‘no provider for network’ on the TabPage. So tried putting import { Network } from ‘@ionic-native/network’; in TabPage.ts but get the same error. I’m new to Ionic 2. Any idea what I’m doing wrong?

8

Not making it all the way to the bottom of this.

9

Please provide more explanation. I’m not sure what you mean. I can set a breakpoint on this.platform and I see it being executed but only when public network:Network is commented out.

10

Did you add Network to the providers of your app module?

1 Like
11

Just added it and network is working.

Thank you!