Ionic应用安卓端运行时页面跳转失效报404问题咨询

• 根因：Ionic打包安卓后默认使用HTML5 history路由模式，WebView会将无锚点的路由路径识别为真实HTTP请求，向localhost发起资源请求导致404。

修复步骤 #

1. 替换路由策略为Hash模式（Angular版本） #

• 打开项目根目录下src/app/app.module.ts文件
• 从@angular/common包导入相关依赖：

  import { HashLocationStrategy, LocationStrategy } from '@angular/common';
  

• 在@NgModule的providers配置数组中新增路由策略声明：

  @NgModule({
    // 其余配置保持不变
    providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]
  })
  

  修改后所有前端路由会自动带上#前缀，WebView会识别为前端路由跳转，不会发起真实网络请求。

若使用Ionic Vue/Ionic React，直接将对应路由库的路由模式修改为hash即可，无需修改上述Angular专属配置。

2. 校验路由配置 #

• 检查app-routing.module.ts中所有路由条目path的拼写、大小写是否和this.router.navigate传入的路径完全一致，安卓系统文件路径大小写敏感，开发时Windows/macOS环境不校验大小写，会出现开发正常打包后报错的情况。
• 确认所有跳转目标路径都已在路由配置中注册，无遗漏。

3. 修正baseHref配置 #

• 打开项目根目录angular.json文件，找到projects -> [项目名] -> architect -> build -> options配置项
• 将baseHref的值修改为./（相对路径），避免WebView按绝对路径加载资源：

  {
    "build": {
      "options": {
        "baseHref": "./",
        // 其余配置保持不变
      }
    }
  }
  

4. 重新打包验证 #

• 执行ionic build构建最新前端资源
• 执行ionic cap sync android将资源同步到安卓原生项目
• 重新打包APK安装测试即可

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