使用 Phonegap 构建时，Angular 应用程序不起作用答案

【问题标题】：Angular app doesn't work when built with Phonegap使用 Phonegap 构建时，Angular 应用程序不起作用
【发布时间】：2014-12-25 06:05:11
【问题描述】：

背景：

我已经构建了一个在浏览器上运行良好的 Angular 应用程序。在前端我有 HTML/CSS/Angular/Bootstrap，后端是 Web API。所以完全分开了。

我把前面的代码压缩了，用 Phonegap 构建了 android 应用程序。当我运行它时，我可以看到我网站的第一个屏幕。我已经确认那里的角码有效，因为我可以看到它根据用户未登录的事实过滤导航。但是当我尝试转到我的应用程序的任何其他页面时，我得到一个空白屏幕，所以我尝试使用 PG 远程调试器对其进行远程调试。每次我尝试加载除主页之外的任何内容时，我都会失去与目标的连接。我在控制台中没有看到任何 JS 错误。

这是日志中唯一的内容：

    "exception firing pause event from native"
    "exception firing resume event from native"

我是否遗漏了某些可能导致此行为的配置部分，或者是否有其他方法可以调试此问题？

【问题讨论】：

当你说它可以在浏览器上运行时，你使用的是本地网络服务器，还是你可以双击 index.html 并在浏览器中打开？
它适用于本地网络服务器。 Back 和 Front 在不同的网络服务器上工作。我知道你在说什么。如果我只是打开文件，PATH/Routing 将不起作用是有道理的。问题是我确定 PG 是如何工作的，我认为它模拟了网络服务器。我试图通过添加基本 href 但都没有帮助。虽然它的行为就像在它正在查看的地址上找不到任何东西一样，但调试器中没有抛出任何错误。我是否缺少配置文件或其他内容？

标签： angularjs debugging cordova phonegap-build

【解决方案1】：

由于您使用的是 angularJS，我猜您是在本地使用网络服务器来使应用程序在您的浏览器上运行，所以一切似乎都正常

虽然 PhoneGap 使用 file server 在WebView 上运行您的应用程序，这类似于在没有网络服务器的浏览器上打开 index.html。底线是，如果您可以通过在没有网络服务器的情况下仅打开 index.html 来使您的应用程序在桌面浏览器上运行，那么当您构建为 PhoneGap 应用程序时它将可以工作。

在浏览器上测试您的应用程序时，您可能会遇到Cross-Origin 问题，如果您的应用程序正在进行 REST API 调用，或者您从另一个 .html 文件加载 angularJS 模板，则会发生这种情况，请注意这些跨域限制在 PhoneGap 构建中。因此，在本地浏览器上进行测试时，您可能需要使用 web security disabled 打开 Chrome。

如果您使用网络服务器开发您的应用程序进行测试，那么您可能有用于加载资源或 href 的绝对 URL，您必须将它们更改为 relative URL paths。

例如，将<a href="/#/next-page"> 更改为<a href="#/next-page">，或将<img src="/images/logo.png"> 更改为<img src="images/logo.png">

【讨论】：

是的，这是相对 URL 的问题。谢谢。