Ionic Angular应用部署Android后资源加载失败求助

问题根源 #

Capacitor Android WebView对相对路径的解析逻辑与浏览器存在差异，以./开头的路径会被识别为无协议的本地路径，触发MalformedURLException，导致翻译文件、图标等资源无法加载。

解决方案步骤 #

1. 修正TranslateLoader资源路径

将翻译文件的相对路径改为绝对路径（以/开头），确保WebView正确识别为http://localhost/下的资源：

export function createTranslateLoader(http: HttpClient) {
    let suffix = `.json`;

    if (environment.buildVersion) {
        suffix += '?v=' + environment.buildVersion;
    }

    // 替换./assets/i18n/为/assets/i18n/
    return new TranslateHttpLoader(http, '/assets/i18n/', suffix);
}

2. 修正angular.json资源输出路径

修改ionicons的svg资源输出配置，去掉output字段前的./，确保资源构建后处于正确的根相对路径：

"assets": [
    {
        "glob": "**/*",
        "input": "src/assets",
        "output": "assets"
    },
    {
        "glob": "**/*.svg",
        "input": "node_modules/ionicons/dist/ionicons/svg",
        // 替换./svg为svg
        "output": "svg"
    }
],

3. 清理缓存并重新构建同步

执行以下命令确保资源正确编译并同步到Android项目：

# 清理Angular构建缓存
rm -rf dist/
# 生产模式构建
ionic build --prod
# 同步到Android
npx cap sync android

验证要点 #

• 检查dist/目录，确认assets/i18n下的翻译文件和svg目录下的图标文件存在
• 查看Android项目的android/app/src/main/assets/public/目录，确认同步后的资源完整
• 重新运行Android应用，检查日志是否不再出现MalformedURLException，翻译和图标功能恢复正常

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