Angular5+Ionic3在Android设备读取本地JSON数据失败求助

我之前做Ionic3项目时碰到过完全一样的问题——浏览器里本地JSON加载毫无问题，打包到Android平板上就彻底没数据了。当时查了不少Ionic2/Angular2的方案，确实有些细节在Ionic3+Angular5里有调整，给你整理几个亲测有效的解决办法：

• 确认静态资源配置与文件位置
  首先确保你的JSON文件放在assets目录下（比如assets/data/your-data.json），这是Ionic默认的静态资源存放目录。然后检查.angular-cli.json（Angular5对应的配置文件）里的assets项，确认已经包含JSON文件所在路径：

  "assets": [
    "assets",
    "favicon.ico",
    { "glob": "**/*.json", "input": "./assets/data/", "output": "./assets/data/" }
  ]
  

  这个配置会告诉Angular打包时把指定目录的JSON文件也纳入打包范围，避免Android打包后漏掉资源。

• 调整Service中的数据加载方式
  别再手动拼接URL了，改用Angular5推荐的HttpClient，直接使用相对于assets的绝对路径请求：

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class DataService {
    constructor(private http: HttpClient) {}
  
    loadData() {
      // 直接使用assets根路径，Ionic会自动处理跨平台映射
      return this.http.get('assets/data/your-data.json');
    }
  }
  

  这里要注意：Ionic3开始不再需要像Ionic2那样加www前缀，官方优化了打包机制，直接写assets/xxx就能正确映射到对应资源。

• 验证Android打包的资源同步情况
  如果配置都对但还是没数据，可以手动去platforms/android/app/src/main/assets/www/assets目录下看看，你的JSON文件是不是已经被拷贝过来了。如果没找到，执行ionic cordova prepare android命令强制重新同步资源，很多时候是打包时资源同步不彻底导致的。

• 兜底的权限配置（可选）
  要是前面的方法都没用，可以在config.xml里添加以下配置，确保Android允许访问本地资源：

  <access origin="*" />
  <allow-navigation href="*" />
  

  不过这是兜底方案，一般前面的配置正确的话不需要这一步。

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