Ionic Capacitor (Angular) blank page ios when building from XCode

Question

I'm building an app with Ionic 6 + capacitor. It works fine when testing on the browser and the Android build. However, when I try to build it using XCode it just doesn't work: it only shows a blank page.

If I run the command ionic capacitor run ios -l --external from Webstorm, the iphone emulator starts and everything works fine. If I open the project with XCode and click the play button, it shows the emulator with a blank page.

My capacitor.config file is:

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

The console of XCode when starting the app is:

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

Notice that localhost doesn't show the usual 8100 port.

The problem is that when I run the app via XCode, the angular server is not starting, hence the app is only a blank page. If I start the server via ng run app:serve --host=0.0.0.0 --port=8100 and I add the following config to capacitor.config in XCode:

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

Then everything works fine again.

Is there any command or any capacitor config I would need to include to start the angular server when the app starts? Or I don't need to start it and the problem may be somewhere else?

Thanks in advance

UPDATE: The problems seems to be in the auth guard. I still have to find out what exactly causing the problem, but without the guard the app works fine.

Answer 1

You can run 2 ways your project:

• Live Reload
• Built app

Live Reload is a good way for debugging the Mobile App, because you will see the changes in 1 sec.

For Built app, you need to do a lot of process:

• Run ng build and check where it's build (usually dist/nameoftheproject)
• Go to capacitor config.ts and change "webDir": "www" to webDir: "dist/nameoftheproject"
• Remove the server property in capacitor.config.ts (It's only for Live Reload)
• Run npx cap sync
• Then npx cap open ios for opening Xcode

Now, that's why people prefer using "Live Reload" for debugging because using the "Built app way" it's too long to see every change.

Edit: In fact, when you finish your app, you need to build it again if you plan to publish it on the App Store.

So that's how you will see your app in Xcode. Good luck: <:)