Andrew Fletcher published: 17 April 2022 (updated) 27 April 2022 5 minutes read
Table of contents
While loading an ionic project, in Xcode when performing a run routine I had the following response
⚡️ Loading app at capacitor://localhost...
2022-04-17 15:54:01.318573+1000 App[74515:7355495] [Process] 0x7f8758828820 - [pageProxyID=5, webPageID=6, PID=74520] WebPageProxy::didFailProvisionalLoadForFrame: frameID=3, domain=NSCocoaErrorDomain, code=260
⚡️ WebView failed provisional navigation
⚡️ Error: The file “index.html” couldn’t be opened because there is no such file.The Xcode build command is presenting no errors. However when I flip on the run command and go to the simulator it is presenting me with the white screen of death. In the Xcode console, I'm seeing the above error.
So what did I miss?
What was I doing before this step?
To work this out I went back to the last action(s) I did. In Iterm2 I ran the command
ionic build --runWhich for me is similar as running
ionic run buildIn running the second command the response was
> {project}@0.0.1 build
> ng build
Node.js version v17.4.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
10 rules skipped due to selector errors:
:host-context([dir=rtl]) .ion-float-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-sm-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-md-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-lg-end -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-start -> subselects_1.subselects[name] is not a function
:host-context([dir=rtl]) .ion-float-xl-end -> subselects_1.subselects[name] is not a function
Initial Chunk Files | Names | Size
main.js | main | 717.04 kB
polyfills.js | polyfills | 44.42 kB
styles.css | styles | 33.84 kB
runtime.js | runtime | 3.60 kB
| Initial Total | 798.90 kB
Lazy Chunk Files | Names | Size
9597.js | - | 102.15 kB
polyfills-core-js.js | polyfills-core-js | 92.00 kB
7446.js | - | 61.68 kB
170.js | - | 52.87 kB
4705.js | - | 44.87 kB
5847.js | - | 42.49 kB
1360.js | - | 34.63 kB
1662.js | - | 28.23 kB
5570.js | - | 26.87 kB
4784.js | - | 24.35 kB
9092.js | - | 24.28 kB
2473.js | - | 24.01 kB
2753.js | - | 23.25 kB
7572.js | - | 21.84 kB
4956.js | - | 21.77 kB
9500.js | - | 20.83 kB
9009.js | - | 19.60 kB
2485.js | - | 18.69 kB
polyfills-dom.js | polyfills-dom | 18.02 kB
7957.js | - | 16.63 kB
3148.js | - | 15.46 kB
4138.js | - | 15.14 kB
4269.js | - | 15.04 kB
9797.js | - | 14.94 kB
4099.js | - | 14.91 kB
7465.js | - | 14.83 kB
1772.js | - | 13.80 kB
8113.js | - | 13.73 kB
2430.js | - | 13.55 kB
9073.js | - | 13.22 kB
5127.js | - | 11.70 kB
1259.js | - | 11.40 kB
2787.js | - | 11.11 kB
1678.js | - | 10.48 kB
7014.js | - | 9.29 kB
8739.js | - | 8.83 kB
polyfills-css-shim.js | polyfills-css-shim | 8.46 kB
1014.js | - | 8.33 kB
663.js | - | 8.25 kB
common.js | common | 7.04 kB
2259.js | - | 6.74 kB
7245.js | - | 6.56 kB
8953.js | - | 6.10 kB
167.js | - | 5.84 kB
5436.js | - | 5.41 kB
2691.js | - | 5.29 kB
4665.js | - | 5.25 kB
3509.js | - | 5.06 kB
1157.js | - | 5.02 kB
9871.js | - | 3.81 kB
5651.js | - | 3.49 kB
4380.js | - | 3.27 kB
2781.js | - | 3.10 kB
8169.js | - | 2.06 kB
6451.js | - | 2.02 kB
3206.js | - | 1.74 kB
1915.js | - | 1.69 kB
4777.js | - | 1.51 kB
8979.js | - | 845 bytes
1823.js | - | 730 bytes
5390.js | - | 638 bytes
1454.js | - | 488 bytes
5129.js | - | 476 bytes
Build at: 2022-04-17T06:05:33.343Z - Hash: a4668cb29d54f144 - Time: 6591ms
Warning: /Users/andrewfletcher/Apps/client/{project}/src/app/pages/contact/contact.module.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Warning: /Users/andrewfletcher/Apps/client/{project}/src/app/pages/contact/contact.page.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Warning: /Users/andrewfletcher/Apps/client/{project}/src/app/services/auth.service.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Warning: /Users/andrewfletcher/Apps/client/{project}/src/app/services/search.service.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Warning: /Users/andrewfletcher/Apps/client/{project}/src/environments/environment.prod.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Next you need to sync your project by running
Syncronising your web app with your native project is worth considering in the following instances:
- Need to copy web assets into your native project
- Post you installing a new Capacitor plugin
- Post cloning your project
- Do you have native dependencies – such as CocoaPods (I did have CocoaPods)
The command to sync your web app:
npx cap syncResponse
✔ Copying web assets from www to ios/App/App/public in 963.35ms
✔ Creating capacitor.config.json in ios/App/App in 1.97ms
⠋ copy ios [info] Found 5 Cordova plugins for ios:
cordova-plugin-advanced-http@3.2.2
cordova-plugin-android-permissions@1.1.2
cordova-plugin-device@2.0.3
cordova-plugin-file@6.0.2
cordova-sqlite-storage@6.0.0
✔ copy ios in 1.08s
✔ Updating iOS plugins in 27.86ms
⠸ update ios [info] Found 5 Cordova plugins for ios:
cordova-plugin-advanced-http@3.2.2
cordova-plugin-android-permissions@1.1.2
cordova-plugin-device@2.0.3
cordova-plugin-file@6.0.2
cordova-sqlite-storage@6.0.0
✔ Updating iOS native dependencies with pod install in 7.19s
[info] Found 5 incompatible Cordova plugins for ios, skipped install:
cordova-plugin-ionic-keyboard@2.2.0
cordova-plugin-ionic-webview@5.0.0
cordova-plugin-splashscreen@6.0.0
cordova-plugin-statusbar@2.4.3
cordova-plugin-whitelist@1.3.5
✔ update ios in 7.41s
✔ copy web in 637.80μp
✔ update web in 816.07μp
[info] Sync finished in 8.496s
[?] Would you like to help improve Capacitor by sharing anonymous usage data? 💖
Read more about what is being collected and why here:
https://capacitorjs.com/telemetry. You can change your mind at any time by
using the npx cap telemetry command.
Copy the capacitor files
Command to execute
ionic capacitor copy ios
Finally run your project
While there are a few ways to deploy your project on native devices, most run fine with
npx cap run
Test and check
A test and quick in Xcode now shows the app rather than the white screen of death.
Quick fix to the issue
Run the following commands
npm run build
npx cap sync
ionic capacitor copy ios
npx cap run
If you want to open the app into Xcode, run the command
ionic capacitor open ios
Related articles
Andrew Fletcher
•
17 Dec 2023
Ignoring ffi-1.16.3 because its extensions are not built. Try: gem pristine ffi --version 1.16.3
The error you're encountering indicates an issue with the ffi gem during the CocoaPods update. The error message suggests trying to run the gem pristine command to fix it.Using terminal - run the following command:gem pristine ffi --version 1.16.3This command will attempt to restore the ffi gem to...
Andrew Fletcher
•
31 Oct 2023
Android icon not changing
If the Android app icon is not changing from the default icon (in my situation this was the Capacitor icon), here are some steps to troubleshoot and resolve the issue: Check the Icon FilesEnsure that you have provided the correct icon files in the appropriate directory. In a Capacitor project,...
Andrew Fletcher
•
11 Oct 2023
Launching app code in a simulator like Xcode or Android Studio
Loading the code in a platform - in this article, I'll be focusing on Android and iOS. Ionic app shell prompts for iOS and Android devices. Here's a breakdown of the commands:npm run buildThis command is used to build your web app. It's typically associated with web development frameworks...