Ionic Angular本地JSON读取异常：浏览器正常设备端页面空白

看起来你遇到的核心问题是移动端本地JSON加载失败，导致页面因无数据渲染而空白。浏览器能正常工作是因为它对相对路径的解析逻辑和Ionic移动端打包后的环境不一致，再加上你没有添加错误处理，加载失败时无法看到报错信息，更难排查问题。下面具体拆解问题和给出解决办法：

1. 不推荐用fetch加载本地Assets资源 #

在Ionic + Angular项目中，官方更建议使用Angular自带的HttpClient来加载本地JSON文件。它能更好地适配Ionic打包后的资源路径（比如Android/iOS的文件系统路径），而原生fetch在移动端环境下对相对路径的解析容易出现偏差。

2. 缺失错误处理导致问题无法定位 #

你的fetch代码没有处理异常情况，如果JSON文件加载失败（比如路径拼写错误、打包时资源未被正确包含），this.items会一直处于undefined状态，*ngFor循环没有数据可渲染，页面自然空白，且你看不到任何报错提示。

3. 额外小问题：点击事件方法名不匹配 #

模板中绑定的点击事件是(click)="itemTapped1($event, item)"，但TS文件里定义的方法是itemTap(event, data)，方法名不一致会导致点击时触发报错，这个细节也需要修正。

修改后的home.ts代码 #

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
// 注意要导入对应的ItemPage，否则push页面会报错
import { ItemPage } from '../item/item';

@Component({
  selector: 'page-home-ionic',
  templateUrl: 'home.html'
})
export class HomePage {
  items: any = []; // 初始化空数组，避免页面加载时*ngFor触发报错
  // 使用相对于src目录的路径，Ionic打包时会自动处理资源路径
  private readonly DATA_URL = 'assets/data/data.json';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    protected httpClient: HttpClient
  ) {
    this.loadLocalData();
  }

  loadLocalData() {
    this.httpClient.get(this.DATA_URL)
      .subscribe({
        next: (json) => {
          this.items = json;
          console.log('JSON加载成功:', json);
        },
        error: (error: HttpErrorResponse) => {
          console.error('JSON加载失败:', error);
          // 这里可以添加用户友好的错误提示，比如用Ionic的ToastController
          // this.toastCtrl.create({message: '数据加载失败，请稍后重试', duration: 3000}).present();
        }
      });
  }

  // 和模板中的方法名保持一致
  itemTapped1(event, data) {
    this.navCtrl.push(ItemPage, { data: data });
  }
}

额外检查项 #

• 确认src/assets/data/data.json文件确实存在，路径和文件名拼写完全正确（移动端文件系统区分大小写，而浏览器通常不敏感，这点要注意）。
• 检查angular.json中的assets配置，确保assets目录被包含在打包资源中（Ionic默认配置已包含，但可以确认一下）：

  "assets": [
    "src/assets",
    "src/favicon.ico"
  ]
  

完成以上修改后，既能正确加载本地JSON资源，又能捕获加载异常方便排查，页面就不会再出现空白情况啦。

内容的提问来源于stack exchange，提问作者Bongaigaon Gapps