The app is just blank

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();

}

}

Which starter template did you use?

ionic start myApp blank

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

which errors in the console?

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)

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

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

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

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';