White screen on run in device/browser


#1

My app works OK when I serve but when I run in a device or in browser I only can see the Splash Screen and then a white screen.

I run it on browser and in console I can see these errors:

[Error] ERROR – Error: Uncaught (in promise): Error: No component factory found for t. Did you add it to @NgModule.entryComponents?

I dont understand what means “t”.

My package.json is this:

“dependencies”: {
@angular/common”: “5.0.3”,
@angular/compiler”: “5.0.3”,
@angular/compiler-cli”: “5.0.3”,
@angular/core”: “5.0.3”,
@angular/forms”: “5.0.3”,
@angular/http”: “5.0.3”,
@angular/platform-browser”: “5.0.3”,
@angular/platform-browser-dynamic”: “5.0.3”,
@ionic-native/background-mode”: “^4.7.0”,
@ionic-native/core”: “4.4.0”,
@ionic-native/google-maps”: “^4.5.3”,
@ionic-native/splash-screen”: “^4.4.0”,
@ionic-native/status-bar”: “4.4.0”,
@ionic/storage”: “2.1.3”,
“cordova-android”: “6.3.0”,
“cordova-browser”: “5.0.3”,
“cordova-plugin-background-mode”: “^0.7.2”,
“cordova-plugin-device”: “^2.0.1”,
“cordova-plugin-googlemaps”: “^2.2.2”,
“cordova-plugin-ionic-keyboard”: “^2.0.5”,
“cordova-plugin-ionic-webview”: “^1.1.16”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.1”,
“cordova-plugin-whitelist”: “^1.3.3”,
“ionic-angular”: “3.9.2”,
“ionic-plugin-keyboard”: “^2.2.1”,
“ionicons”: “3.0.0”,
“rxjs”: “5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
@ionic/app-scripts”: “3.1.8”,
“typescript”: “2.4.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-device”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-statusbar”: {},
“ionic-plugin-keyboard”: {},
“cordova-plugin-googlemaps”: {
“API_KEY_FOR_ANDROID”: “AIzaSyDprKBnvD11FKF9kG9qMrFGxNYN2_p9BoY”,
“PLAY_SERVICES_VERSION”: “11.8.+”
},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-background-mode”: {}
},
“platforms”: [
“android”,
“browser”
]
}
}

Thank you so much.


#2

the problem seems to be in your code, so we can’t really help you right now :slight_smile:


#3

So if my problem is in my code why when I write “ionic serve” my app runs ok and when I write “ionic cordova run android --prod” the problem appears?

Thank you.


#4

post your project structure… the problem seems to be in component.ts


#5

Share your code so that we can help you . Maybe you execute any code before platform ready.


#6

Hello, this is my structure:
├── app
│ ├── app.component.ts
│ ├── app.html
│ ├── app.module.ts
│ ├── app.scss
│ └── main.ts
├── assets
│ └── icon
│ └── favicon.ico
├── components
│ ├── components.module.ts
│ ├── manejador-errores
│ │ ├── manejador-errores.html
│ │ ├── manejador-errores.scss
│ │ └── manejador-errores.ts
│ └── timer
│ ├── timer.html
│ ├── timer.scss
│ └── timer.ts
├── index.html
├── manifest.json
├── pages
│ ├── cambiar-contraseña
│ │ ├── cambiar-contraseña.html
│ │ ├── cambiar-contraseña.module.ts
│ │ ├── cambiar-contraseña.scss
│ │ └── cambiar-contraseña.ts
│ ├── home
│ │ ├── home.html
│ │ ├── home.scss
│ │ └── home.ts
│ ├── inicio
│ │ ├── inicio.html
│ │ ├── inicio.module.ts
│ │ ├── inicio.scss
│ │ └── inicio.ts
│ ├── mapa
│ │ ├── mapa.html
│ │ ├── mapa.module.ts
│ │ ├── mapa.scss
│ │ └── mapa.ts
│ ├── match
│ │ ├── match.html
│ │ ├── match.module.ts
│ │ ├── match.scss
│ │ └── match.ts
│ └── player
│ ├── player.html
│ ├── player.module.ts
│ ├── player.scss
│ └── player.ts
├── providers
│ └── user-service
│ └── user-service.ts
├── service-worker.js
└── theme
└── variables.scss

Thank you.


#7

can you share your app.component.ts ?


#8

I can´t share my code because it is in a private repository but I can share app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { InicioPage } from '../pages/inicio/inicio';
import { CambiarContraseñaPage } from '../pages/cambiar-contraseña/cambiar-contraseña';
import { AlertController } from 'ionic-angular';
import { UserServiceProvider } from '../providers/user-service/user-service';
import { ManejadorErroresComponent } from '../components/manejador-errores/manejador-errores';
import { timer } from 'rxjs/observable/timer';
import { BackgroundMode } from '@ionic-native/background-mode';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  showSplash = true;
  rootPage: any = InicioPage;
  inicioPage: any = InicioPage;
  pages: Array<{ title: string, icon: string, component: any }>;
  private manejadorErrores = new ManejadorErroresComponent(this.alerta);


  constructor(platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private alerta: AlertController,
    private userService: UserServiceProvider,
    private backgroundMode : BackgroundMode) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      this.backgroundMode.enable();
      timer(3000).subscribe(() => this.showSplash = false);
    });

    this.pages = [
      { title: "Mis Partidos pendientes", icon: "home", component: HomePage },
      { title: "Cambiar contraseña", icon: "create", component: CambiarContraseñaPage },
      { title: "Cerrar Sesión", icon: "log-out", component: "" }
    ];
  }
  openPage(page) {
    if (page.title == "Cerrar Sesión") {
      this.alertaCerrarSesion();
    }
    else {
      this.nav.setRoot(page.component);
    }
  }
  cerrarSesion() {
    this.userService.logout().then(
      res => {
        console.log(res),
          this.nav.setRoot(this.inicioPage)
      },
      error => this.manejadorErrores.manejarError(error));
  }
  alertaCerrarSesion() {
    let confirm = this.alerta.create({
      title: '¡Atención!',
      message: '¿Seguro que quieres cerrar sesión?',
      buttons: [
        {
          text: 'No',
          handler: () => {
          }
        },
        {
          text: 'Sí',
          handler: () => {
            this.cerrarSesion();
          }
        }
      ]
    });
    confirm.present();
  }
}

And app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PlayerPage } from '../pages/player/player';
import { InicioPage } from '../pages/inicio/inicio';
import { MatchPage } from '../pages/match/match';
import { CambiarContraseñaPage } from '../pages/cambiar-contraseña/cambiar-contraseña';
import { TimerComponent } from '../components/timer/timer';
import { GoogleMaps } from '@ionic-native/google-maps';

import { HttpModule } from '@angular/http'
import { UserServiceProvider } from '../providers/user-service/user-service';
import { ManejadorErroresComponent } from '../components/manejador-errores/manejador-errores';
import { MapaPage } from '../pages/mapa/mapa';
import { BackgroundMode } from '@ionic-native/background-mode';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PlayerPage,
    InicioPage,
    MatchPage,
    MapaPage,
    CambiarContraseñaPage,
    TimerComponent,
    ManejadorErroresComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PlayerPage,
    InicioPage,
    MatchPage,
    MapaPage,
    CambiarContraseñaPage,
    TimerComponent,
    ManejadorErroresComponent,
  ],
  providers: [
    SplashScreen,
    StatusBar,
    GoogleMaps,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    UserServiceProvider,
    ManejadorErroresComponent,
    BackgroundMode
  ]
})
export class AppModule { }

Thank you.


#9

I shared it.
Thank you.


#10

which page is the initial page after splash screen?


#11

Inicio.html:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Inicio de sesión</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="item-background3">
  <ion-item class="inicio">
    <ion-label color="primary" class="etiqueta" stacked>Usuario</ion-label>
    <ion-input class="entradaTexto" clearInput="true" type="text" [(ngModel)]="user" placeholder="Escriba su usuario"></ion-input>
  </ion-item>
  <ion-item class="inicio">
    <ion-label color="primary" stacked>Contraseña</ion-label>
    <ion-input [(ngModel)]="pass" clearInput="true" type="password" placeholder="Escriba su contraseña"></ion-input>
  </ion-item>
  <ion-row justify-content-center>
    <ion-col col-3>
      <button ion-button full (click)="this.cambiaAHomePage()">Enviar</button>
    </ion-col>
  </ion-row>
</ion-content>

Thank you.