Debugging startup - non native, just in browser

Ionic Framework ionic-v3
1

Hi

I’m going through an Ionic 2 tutorial, just using a web browser to test code on my mac. At some point I’ve made a mistake and now my app, served by ‘ionic serve’ shows a white blank page.

I have looked in the console logs of both ‘ionic serve’ and the web browser - but can’t see anything helpful. I was hoping to get a stack trace or something that leads me to the straw in this particular haystack :slight_smile:

When I run ‘ionic serve -lc’, all I get in the console is this:

Running live reload server: http://localhost:35729
Watching: www//*, !www/lib//*
√ Running dev server: http://localhost:8100
Ionic server commands, enter:
restart or r to restart the client app from the root
goto or g and a url to have the app navigate to the given url
consolelogs or c to enable/disable console log output
serverlogs or s to enable/disable server log output
quit or q to shutdown the server and exit

ionic $ 0 898988 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
1 899000 error ReferenceError: Can’t find variable: ionic, http://localhost:8100/?ionicplatform=android, Line: 92
0 899008 error ReferenceError: Can’t find variable: ionic, http://localhost:8100/?ionicplatform=ios, Line: 92
0 899622 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
0 899648 log Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
1 899657 error ReferenceError: Can’t find variable: ionic, http://localhost:8100/?ionicplatform=ios, Line: 92
1 899676 error ReferenceError: Can’t find variable: ionic, http://localhost:8100/?ionicplatform=android, Line: 92
2 899747 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
2 899815 warn Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

I would like to know what tools / techniques people use to track down what appears to be an Angular 2 startup error, any tips for a fellow coder would be greatly appreciated.

2

Just a heads up, this is a bit redundant, since ionic serve will start the livereload server automatically, so no need for the extra -lc

3

From the look of the errors,

1 899000 error ReferenceError: Can't find variable: ionic, http://localhost:8100/?ionicplatform=android, Line: 92
0 899008 error ReferenceError: Can't find variable: ionic, http://localhost:8100/?ionicplatform=ios, Line: 92

Seems to be the cause of the problems.
Where are you using ionic in your code?

4

Looks like this error occures when you are using ?ionicplatform=ios|android (default in lab view)
That parameter seems to define/use a variable named inoic somewhere…

5

Interesting, seeing this too. Hmm, could you open an issue on github for this. Could be a simple fix.

6

Done.

7

@johncclayton if you run ionic serve -c you dont get this error.
The -l parameter is for lab view that means you see both ios and android version side by side in the browser.
Each of those use ?ionicplatform parameter to display respective ios and andriod version.

8

Oh, was already an issue for this problem.

9

I know its not a fix but I have noticed that if you change ?ionicplatform to ?ionicPlatform the error ionic is not defined dissapears. Note the capital P.

10

i believe i started seeing this in the console log after running typscript install in my project which already had a typscript folder

11

Hi, i’m newbie on ionic 2.
today when i running my app, i got some warnings. I just want to test the functionality of ionic-native. Why cordova is not available ?

warning :

Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
main.js:65871 Native: tried calling Splashscreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
main.js:65871 Native: tried calling Toast.show, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator

code :

import { Component, OnInit, ViewChild }   from '@angular/core';
import { NavController, Slides }          from 'ionic-angular';
import { SMS, Device, Toast }             from 'ionic-native';

import { Platform } from 'ionic-angular';


import { TermsOfServicePage } from '../terms-of-service/terms-of-service'; 

@Component({
  selector: 'page-introduction',
  templateUrl: 'introduction.html'
})
export class IntroductionPage implements OnInit {

  btnLeftStartCaption: string = ''
  btnRightEndCaption: string = '';

  @ViewChild('sliderIntroduction') sliderIntroduction: Slides;

  constructor(public platform: Platform, public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello Introduction Page');
  }

  ngOnInit(): void {
    // SMS.send('08123456789', 'Test');
    // console.log(Device.device.uuid);
    this.platform.ready().then(() => {
      Toast.show('Holla', '5000', 'center').subscribe(
        toast => {
          console.log(toast);
        }
      );
    });
  }

  gotoNextPage() {
    this.navCtrl.setRoot(TermsOfServicePage);
  }

}

i’m running the program using CLI command:

ionic serve -l
12

“ionic serve” runs your application as a website and it does not have any cordova capabilities.
use can either run in the emulator to see the native behavior (“ionic emulate android” or “ionic emulate ios”) OR
you can use “ionic run browser” to run your app with cordova browser plugin (this gets installed automatically first time you run) and this should inject the cordova.js and any other capabilities

this is what you should see in the console

adding proxy for Device
adding proxy for NetworkStatus
adding proxy for SplashScreen
adding proxy for StatusBar
StatusBar is not supported

See the discussion here -