The app is just blank


#1

When I test the app in serve -lab, it is just blank.
If I test it on my Android phone, I see the splashscreen, but then it turns blank. What did I miss.

This is the home.ts

import { Component } from ‘@angular/core’;
import { AuthProvider } from ‘…/…/providers/auth/auth’;
import { NavController, App, LoadingController, ToastController } from ‘ionic-angular’;
import { LoginPage } from ‘…/login/login’;

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

loading: any;
isLoggedIn: boolean = false;

constructor(public app: App, public navCtrl: NavController, public authProvider: AuthProvider, public loadingCtrl: LoadingController, private toastCtrl: ToastController) {
if(localStorage.getItem(“token”)) {
this.isLoggedIn = true;
}
}

logout() {
this.authProvider.logout().then((result) => {
this.loading.dismiss();
let nav = this.app.getRootNav();
nav.setRoot(LoginPage);
}, (err) => {
this.loading.dismiss();
this.presentToast(err);
});
}

showLoader(){
this.loading = this.loadingCtrl.create({
content: ‘Authenticating…’
});

this.loading.present();

}

presentToast(msg) {
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: ‘bottom’,
dismissOnPageChange: true
});

toast.onDidDismiss(() => {
  console.log('Dismissed toast');
});

toast.present();

}

}


#2

Which starter template did you use?

ionic start myApp blank


#3

I started with the Tabs template. I have made several pages, but suddenly it is just blank.


#4

which errors in the console?


#5

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools:
https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools:
https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

(Same for the local browser and lab of course)


#6

This is when testing in Ionic Serve -lab

Hello AuthProvider Provider
core.js:3687 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
util.js:60 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
checkAvailability @ plugin.js:23
callCordovaPlugin @ plugin.js:107
(anonymous) @ plugin.js:261
value @ decorators.js:132
MyApp.platform.ready.then @ app.component.ts:25
t.invoke @ polyfills.js:3
onInvoke @ core.js:4749
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4740
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
util.js:60 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
checkAvailability @ plugin.js:23
callCordovaPlugin @ plugin.js:107
(anonymous) @ plugin.js:261
value @ decorators.js:132
MyApp.platform.ready.then @ app.component.ts:26
t.invoke @ polyfills.js:3
onInvoke @ core.js:4749
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
(anonymous) @ polyfills.js:3
t.invokeTask @ polyfills.js:3
onInvokeTask @ core.js:4740
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
ion-dev.js?v=3.1.8:120 Dev server logger closed


#7

I think it is because you call native functions wich need Cordova. And Cordova is not available with serve i believe


#8

What else than Camera is native? Do you know that? It is blank when testing on an Android device also.


#9

I also get these errors when compiling. Are they critical og just nice to know?

        All imports are unused.

   L1:  import { HttpClient } from '@angular/common/http';
   L2:  import { Http, Headers } from '@angular/http';

        'title' is declared but its value is never read.

 L251:      let title      : string         = this.form.controls["title"].value,
 L252:              headers         : any           = new HttpHeaders({ 'Content-Type': 'application/json' }),

        'marker' is declared but its value is never read.

 L351:                                      let marker = new google.maps.Marker({
 L352:                                        map: map,

        'content' is declared but its value is never read.

 L358:                                      let content = "<h4>Information!</h4>";

        All imports are unused.

   L7:  import { TabsPage } from '../pages/tabs/tabs';
   L8:  import { LoginPage } from '../pages/login/login';

        All imports are unused.

   L7:  import { TabsPage } from '../pages/tabs/tabs';
   L8:  import { LoginPage } from '../pages/login/login';
   L9:  import { AuthProvider } from '../providers/auth/auth';

        'HttpHeaders' is declared but its value is never read.

  L17:  import { Camera } from '@ionic-native/camera';
  L18:  import { HttpClient, HttpHeaders } from '@angular/common/http';
  L19:  import { HttpClientModule } from '@angular/common/http';

        All imports are unused.

  L19:  import { HttpClientModule } from '@angular/common/http';
  L20:  import { Http, Headers } from '@angular/http';
  L21:  import { HttpModule } from '@angular/http';