從 XCode 構建時的離子電容器（角）空白頁 ios

Question

我正在用 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啟動app時的控制台是：

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 運行應用程序時，angular 服務器沒有啟動，因此應用程序只是一個空白頁面。 如果我通過ng run app:serve --host=0.0.0.0 --port=8100啟動服務器並將以下配置添加到 XCode 中的capacitor.config配置中：

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

然后一切正常。

當應用程序啟動時，我需要包含任何命令或任何電容器配置來啟動 angular 服務器嗎？ 或者我不需要啟動它，問題可能出在其他地方？

提前致謝

更新：問題似乎出在身份驗證守衛中。 我仍然需要找出究竟是什么導致了這個問題，但沒有警衛，應用程序可以正常工作。

Answer 1

您可以通過 2 種方式運行您的項目：

• 實時重新加載
• 內置應用

Live Reload 是調試移動應用程序的好方法，因為您將在 1 秒內看到更改。

對於內置應用程序，您需要做很多過程：

• 運行ng build並檢查它的構建位置（通常是 dist/nameoftheproject）
• Go 到電容器 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 中看到您的應用程序的方式。 祝你好運：<:)