Angular 5 + Cordova(Phonegap) 应用在Phonegap中无显示问题求助

首先先明确你的环境搭建步骤，方便我们定位问题：

• 创建Angular项目：ng new mobile
• 生成构建文件：ng build
• 创建Phonegap/Cordova项目：phonegap create mobile
• 将Angular构建后的dist/mobile目录下的所有内容，复制到Phonegap项目的www目录
• 在index.html中添加<script src="cordova.js"></script>

问题现象：应用在浏览器中运行一切正常，但在Phonegap应用内测试时，页面无任何内容显示，仅能正常打开index.html文件

核心原因与解决方案 #

1. 修复Angular构建的基础路径 #

Angular默认构建时的base href是/，这个路径在浏览器中没问题，但在Phonegap的本地文件系统中会导致资源找不到。你需要修改构建命令，指定相对路径：

ng build --base-href ./

这个命令会让所有资源（脚本、样式、图片等）都以相对路径引用，适配Phonegap的本地环境。

2. 确保Angular等待Cordova初始化完成 #

Phonegap/Cordova的API必须在deviceready事件触发后才能使用，而Angular默认会在DOM加载完成就启动，这时候Cordova还没准备好，会导致应用无法正常初始化。

修改src/main.ts的启动逻辑，让Angular等待deviceready事件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 等待Cordova初始化完成后再启动Angular
document.addEventListener('deviceready', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}, false);

3. 检查文件复制的完整性 #

确保你把Angular构建后的dist/mobile（注意是dist下的项目子目录，不是dist本身）里的所有文件和文件夹都完整复制到了Phonegap的www目录，包括assets、runtime.js、main.js、styles.css这些关键资源。如果漏了这些文件，页面加载时会因为找不到依赖而空白。

4. 查看调试日志定位具体错误 #

用调试工具查看Phonegap的控制台日志，能快速找到问题根源：

• 运行调试命令：phonegap run android --debug（根据你的目标平台替换为ios等）
• 用Chrome的chrome://inspect连接安卓设备，或Safari连接iOS设备，查看控制台的错误信息（比如资源加载失败、脚本报错等）

5. 确认Cordova.js的引入位置 #

把<script src="cordova.js"></script>放在index.html的</body>标签之前，确保它在Angular的主脚本之前加载（不过我们已经通过deviceready事件控制了Angular的启动时机，这个位置只要在body内就没问题，但放在底部是最佳实践）。

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