Platform.ready Not Firing

Why is platform.ready not firing in the below Ionic 2 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, 
              private network: Network,
              private platform: Platform) {

    var networkState;

    // breakpoint hits on platform.ready
    platform.ready().then(() => {
      // breakpoint NOT hit on the below line
      networkState = network.type;
      var test = 'here';
    });
  }
}

Below is debugger info
deviceready has not fired after 5 seconds.
Channel not fired: onNativeReady
Channel not fired: onCordovaReady
Channel not fired: onCordovaSimulateReady
Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
ionViewDidLoad FriendsPage
ionViewDidLoad LocationsPage

I uninstalled and reinstalled all plugins (cordova plugin remove/add pluginName). Below is my plugin list:
cordova-plugin-console 1.0.7 "Console"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”

I also updated all packages (remove the existing node_modules directory, and then run npm install):
Package
@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/app-scripts 1.0.0
@ionic/storage 1.1.7
ionic-angular 2.0.0
ionic-native 2.4.1
sw-toolbox 3.4.0
typescript 2.0.9
zone.js 0.6.26

Please let me know how to fix this.

Thanks.

A couple of things to try:

  • use a real device, not an emulator
  • build with --prod

These versions you’re showing are far from the latest, so how did you update all the packages exactly?

I’m new to Ionic and want a stable environment. I was told Ionic 2.2.3 and Cordova 6.4.0 are stable. So I used the following steps:

  1. npm install -g ionic@2.2.3

  2. npm install -g cordova@6.4.0

  3. Ran into problems with @ionic-native/network which was resolved in this post

  4. Ran npm outdated to show all cordova plugins needing to be updated

  5. Ran cordova plugin remove/add on plugins needing to be updated until all required versions were met.

My dev env is Windows and VS Code. As mentioned, I’m new to Ionic so please give advice.

Ionic versioning is a bit confusing, because there are several moving parts. CLI versioning is independent of framework versioning. I would highly recommend moving to framework 3.2.1. You can follow entries in the CHANGELOG to see what your package.json should look like and any other breaking changes you may have to make. If your app is relatively new, there probably won’t be much in the way of that, so editing package.json and running npm i should take care of most of it.

I took your advice and updated to Ionic 3. Below are my Ionic 3 newbie steps to help someone else… Please let me know if anything can be improved upon or simplified:

  1. npm remove ionic
  2. npm remove cordova
  3. Install ionic and cordova – npm install –g ionic cordova
  4. Ionic start HelloWorld blank
    
  5. CD source\helloworld
    
  6. Cordova platform add android –save
  7. npm install @ionic-native/core --save
    
  8. ionic cordova plugin add cordova-plugin-network-information
    
  9. npm install --save @ionic-native/network
    
  10. Open VS Code, Open HelloWorld folder.
  11. Modify app.module.ts:
    a. add import { Network } from ‘@ionic-native/network’;
    b providers: [StatusBar, SplashScreen, Network,…]
  12. Modify home.ts
import { Network } from '@ionic-native/network';

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

  constructor(public navCtrl: NavController,
              public alertCtrl: AlertController, 
              private network: Network,
              private platform: Platform) {

    // breakpoint hits on platform.ready
    platform.ready().then(() => {
      // breakpoint NOT hit on the below line
      let alert = this.alertCtrl.create({
        title: 'Help Window!',
        subTitle: network.type,
        buttons: ['Cancel']
      });
      alert.present(alert);
    });
  }
}
  1. Run ionic serve from terminal. Page displays no issues
  2. Select view, debug, add configuration, cordova, simulate android in browser. Press run
  3. Page displays in browser. Set breakpoint on platform.ready and alert.present. Refresh browser, breakpoints hit. No errors.

Please let me if any of the above can be improved. Remember newbie here.

Thanks!

A post was split to a new topic: Platform.ready not firing for --prod builds

So no solution for dev builds so far. Cannot be more worse…