Capacitor: Cannot run my apps on iOS simulators unless its 16.4 after upgrade. Freezes at webveiw loaded

Ionic Framework
1

I have a Ionic capacitor application and have been making upgrades to new version of capacitor etc.
I have also installed the lated version of xcode, but now when I try to run my app in xcode then its works for the 16.4 simulators but nothing below that like the 13.7. (I have tried both dev and prod builds)

The splash screen appears and then just a white screen with the following in the xcode console:

2023-08-21 16:26:38.038677+0100 App[53878:3850870] WF: === Starting WebFilter logging for process App
2023-08-21 16:26:38.038905+0100 App[53878:3850870] WF: _userSettingsForUser : (null)
2023-08-21 16:26:38.038999+0100 App[53878:3850870] WF: _WebFilterIsActive returning: NO
2023-08-21 16:26:38.222474+0100 App[53878:3850870] KeyboardPlugin: resize mode - native
2023-08-21 16:26:38.261301+0100 App[53878:3850870] InAppPurchase[objc] Initialized.
⚡️ Warning: isWebDebuggable only functions as intended on iOS 16.4 and above.
⚡️  Loading app at capacitor://localhost...
To Native Cordova ->  NetworkStatus getConnectionInfo NetworkStatus1831693674 ⚡️  [log] - onscript loading complete
["options": []]
⚡️  WebView loaded

and then in safari console as in this picture:

Safari console example

Here are my current configs:

package.json:

    "@angular/common": "^16.2.1",
    "@angular/core": "^16.2.1",
    "@angular/forms": "^16.2.1",
    "@angular/google-maps": "^16.2.1",
    "@angular/platform-browser": "^16.2.1",
    "@angular/platform-browser-dynamic": "^16.2.1",
    "@angular/router": "^16.2.1",
    "@awesome-cordova-plugins/network": "^5.37.3",
    "@awesome-cordova-plugins/purchases": "^5.44.0",
    "@capacitor-community/sqlite": "^5.0.7-2",
    "@capacitor/android": "^5.2.3",
    "@capacitor/app": "^5.0.0",
    "@capacitor/camera": "^5.0.0",
    "@capacitor/core": "^5.0.0",
    "@capacitor/filesystem": "^5.0.0",
    "@capacitor/haptics": "^5.0.0",
    "@capacitor/ios": "^5.0.0",
    "@capacitor/keyboard": "^5.0.0",
    "@capacitor/preferences": "^5.0.6",
    "@capacitor/status-bar": "^5.0.0",
    "@capawesome/capacitor-app-update": "^5.0.1",
    "@capawesome/capacitor-file-picker": "^5.1.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/file-opener": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/in-app-purchase-2": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/sqlite": "^5.36.0",
    "@ionic/angular": "^6.7.5",
    "cordova-annotated-plugin-android": "^1.0.4",
    "cordova-plugin-app-version": "^0.1.14",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-purchase": "^11.0.0",
    "cordova-plugin-purchases": "^2.4.0",
    "cordova-sqlite-storage": "^6.0.0",
    "crypto-browserify": "^3.12.0",

capacitor.config.js:

import { CapacitorConfig } from '@capacitor/cli';

// @ts-ignore
const config: CapacitorConfig = {
  appId: 'com.gmail.myapp.myapp',
  appName: 'My App',
  webDir: 'www'
};

export default config;

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              "src/theme/variables.scss",
              "src/global.scss",
              "./node_modules/swiper/swiper-bundle.css",
              "./node_modules/leaflet/dist/leaflet.css"
            ],
            "aot": false,
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [
              "node_modules/apexcharts/dist/apexcharts.min.js",
              "node_modules/node-fpdf/src/fpdf_js.js",
              "src/assets/google-mutant/google-mutant.js",
              "./node_modules/leaflet.elevation/src/L.Control.Elevation.js"

            ],
            "assets": [
              {
                "glob": "fconavicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false,
    "schematicCollections": [
      "@ionic/angular-toolkit"
    ]
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

I can add other snippets on request.

Thanks

2

Angular by default only support latest 2 iOS versions (15 and 16)

You should be able to make it compile for older iOS versions doing some changes like the target in the tsconfig.json and maybe enabling the Polyfills (information about Polyfills can be found on the browser support link)

3

Hello thanks,
but even for like ios 16 I get the following error:

⚡️  [error] - {"line":169,"sourceURL":"capacitor://localhost/main.js"}
⚡️  SyntaxError: Unexpected token '{'
⚡️  URL: capacitor://localhost/main.js
⚡️  main.js:169:0
4

Then it looks like other library you use doesn’t support iOS 16, you’ll have to debug the app and see what’s adding the code in main.js line 169.

5

This is at line 169 in main.js:

  static {
    this.ctorParameters = () => [{
      type: _services_networkdetector_network_auto_sync_service__WEBPACK_IMPORTED_MODULE_3__.NetworkAutoSyncService
    }, {
      type: _services_databaseServices_world_airports_service__WEBPACK_IMPORTED_MODULE_4__.WorldAirportsService
    }, {
      type: _services_databaseServices_aircraft_service__WEBPACK_IMPORTED_MODULE_5__.AircraftService
    }, {
      type: _services_databaseServices_globalDBFunctions_service__WEBPACK_IMPORTED_MODULE_6__.GlobalDBFunctionsService
    }, {
      type: _angular_router__WEBPACK_IMPORTED_MODULE_10__.Router
    }, {
      type: _angular_platform_browser__WEBPACK_IMPORTED_MODULE_11__.Title
    }, {
      type: _ionic_angular__WEBPACK_IMPORTED_MODULE_12__.Platform
    }, {
      type: _services_appUpdate_update_service__WEBPACK_IMPORTED_MODULE_8__.UpdateService
    }];
  }

seems like some type of webpack issue maybe

6

After more digging it seems that its not liking any of the static :

  static {
    this.ctorParameters = () => [];
  }