从 XCode 构建时的离子电容器（角）空白页 ios

Posted 2023-02-23

【中文标题】从 XCode 构建时的离子电容器（角）空白页 ios

【英文标题】：Ionic Capacitor (Angular) blank page ios when building from XCode

【发布时间】：2021-12-30 16:24:19

【问题描述】：

我正在使用 Ionic 6 + 电容器构建应用程序。在浏览器和 android 版本上进行测试时效果很好。但是，当我尝试使用 XCode 构建它时，它不起作用：它只显示一个空白页面。

如果我从 Webstorm 运行命令 ionic capacitor run ios -l --external，iphone 模拟器将启动并且一切正常。如果我用 XCode 打开项目并单击播放按钮，它会显示带有空白页面的模拟器。

我的capacitor.config 文件是：

    "appId": "com.ionic.app",
    "appName": "ionic-app",
    "webDir": "www",
    "bundledWebRuntime": false,

XCode启动应用时的控制台是：

2021-12-30 17:09:09.817042+0100 App[22182:360758] KeyboardPlugin: resize mode - native
⚡️  Loading app at capacitor://localhost...
⚡️  [log] - Angular is running in development mode. Call enableProdMode() to enable production mode.
⚡️  WebView loaded
⚡️  To Native ->  App addListener 101717497

请注意 localhost 不显示通常的 8100 端口。

问题是当我通过 XCode 运行应用程序时，角度服务器没有启动，因此应用程序只是一个空白页面。如果我通过ng run app:serve --host=0.0.0.0 --port=8100 启动服务器并将以下配置添加到XCode 中的capacitor.config：

"server": 
        "url": "http://localhost:8100"
    

然后一切都恢复正常了。

当应用程序启动时，我需要包含任何命令或任何电容器配置来启动角度服务器吗？或者我不需要启动它，问题可能出在其他地方？

提前致谢

更新： 问题似乎出在身份验证守卫中。我仍然需要找出究竟是什么导致了问题，但没有保护，应用程序可以正常工作。

【参考方案1】：

您可以通过 2 种方式运行您的项目：

实时重新加载 内置应用

Live Reload 是调试移动应用的好方法，因为您将在 1 秒内看到更改。

对于内置应用，你需要做很多过程：

运行 ng build 并检查它的构建位置（通常是 dist/nameoftheproject） 转到电容器 config.ts 并将 "webDir": "www" 更改为 webDir: "dist/nameoftheproject" 删除电容器.config.ts 中的服务器属性（仅用于 Live Reload） 运行npx cap sync 然后npx cap open ios 打开 Xcode

现在，这就是为什么人们更喜欢使用“Live Reload”进行调试的原因，因为使用“Built app way”要查看所有更改太长了。

编辑：事实上，当你完成你的应用程序后，如果你打算在 App Store 上发布它，你需要重新构建它。

这就是您在 Xcode 中查看应用程序的方式。祝你好运！ <:>

【讨论】：

感谢您的信息！看起来问题出在身份验证守卫中。需要再检查一下，但如果我移除保护，应用程序似乎工作得很好。