【问题标题】:Ionic Reload Blank Page离子重新加载空白页
【发布时间】:2025-12-19 01:55:11
【问题描述】:

在为我的 Ionic 应用程序提供服务时,每次刷新都是空白页。

例如我第一次加载我的应用程序时它可以工作,并且在更改代码后实时重新加载显示一个空白页面,然后它可以工作,然后是一个空白页面等等。

如何找到造成这种情况的原因?我已经将它的路由设置与一个有效的项目(一个空白项目)进行了比较,它们似乎工作方式相同。

当它无法实时重新加载并显示空白页面时,Chrome DevTools 控制台或我的终端中不会显示任何错误。

在使用任何命令为应用提供服务时会发生这种情况:

ionic serve
ionic cordova run android -l
ionic serve --devapp

我的 app.component.ts:

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'List',
      url: '/list',
      icon: 'list'
    }
  ];

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
}

【问题讨论】:

  • 你能发布 app.component.ts
  • 用默认生成的替换 app.component.ts 仍然会产生同样的错误。

标签: angular ionic-framework ionic4


【解决方案1】:

这是一个路由问题。我的空路径重定向到我的仪表板,其中有一个 AuthGuard 与之关联。 AuthGuard 会拒绝我的导航,给我留下一个空白页面。

至于为什么每次都重新加载,我认为我的登录逻辑是每次我的自动登录代码运行时都会翻转一些布尔 isAuthenticated 标志。

【讨论】:

    【解决方案2】:

    这是您的兑现问题,您在您的帐户中加载了哪些数据

    app.component.ts

    这是由于在您的 component.ts 中加载繁重的任务

    【讨论】:

      【解决方案3】:

      尝试按 ctrl+f5 来破坏缓存

      当我将 v3 切换到 v4 或反之亦然时,我遇到了同样的问题

      【讨论】: