ionic-framework: bug: Error when compiling application for Ionic 6.7.5 - Angular 14.2.12 - Capacitor 5.3.0 on Android 5

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v6.x

Current Behavior

Hello, I have a problem with Ionic on Android 5 I have developed an application in Ionic 6 where in newer versions of Android they work well, but when testing on devices smaller than Android 9 the app does not work, the screen remains blank and in the console I get the following messages:

Uncaught SyntaxError: Unexpected reserved word
(index):19226 The key "viewport-fit" is not recognized and ignored.
2VM33:1 Uncaught TypeError: Cannot read property 'triggerEvent' of undefined

Expected Behavior

I was hoping to compile the app in the emulator and be able to see the blank page of the new Ionic project. Like in browser when ionic serve is running

Steps to Reproduce

To replicate the error I did the following:

1. Create blank ionic project with angular. ionic start myAppIonic blank --type=angular
2. copy and pasted the package.json file I had in my main project to this test project:

{
  "name": "my_app_ionic",
  "version": "1.0.0",
  "author": "Fabricio Juncal",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^14.3.0",
    "@angular/core": "^14.3.0",
    "@angular/forms": "^14.3.0",
    "@angular/platform-browser": "^14.3.0",
    "@angular/platform-browser-dynamic": "^14.3.0",
    "@angular/router": "^14.3.0",
    "@awesome-cordova-plugins/android-permissions": "^6.4.0",
    "@awesome-cordova-plugins/barcode-scanner": "^6.4.0",
    "@awesome-cordova-plugins/call-number": "^6.4.0",
    "@awesome-cordova-plugins/camera": "^6.4.0",
    "@awesome-cordova-plugins/clipboard": "^6.4.0",
    "@awesome-cordova-plugins/core": "^6.4.0",
    "@awesome-cordova-plugins/diagnostic": "^6.4.0",
    "@awesome-cordova-plugins/file": "^6.4.0",
    "@awesome-cordova-plugins/file-path": "^6.4.0",
    "@awesome-cordova-plugins/file-transfer": "^6.4.0",
    "@awesome-cordova-plugins/geolocation": "^6.4.0",
    "@awesome-cordova-plugins/google-analytics": "^6.4.0",
    "@awesome-cordova-plugins/http": "^6.4.0",
    "@awesome-cordova-plugins/in-app-browser": "^6.4.0",
    "@awesome-cordova-plugins/location-accuracy": "^6.4.0",
    "@awesome-cordova-plugins/native-geocoder": "^6.4.0",
    "@awesome-cordova-plugins/network": "^6.4.0",
    "@awesome-cordova-plugins/onesignal": "^6.4.0",
    "@awesome-cordova-plugins/open-native-settings": "^6.4.0",
    "@awesome-cordova-plugins/screen-orientation": "^6.4.0",
    "@awesome-cordova-plugins/splash-screen": "^6.4.0",
    "@awesome-cordova-plugins/sqlite": "^6.4.0",
    "@awesome-cordova-plugins/sqlite-porter": "^6.4.0",
    "@awesome-cordova-plugins/status-bar": "^6.4.0",
    "@awesome-cordova-plugins/wheel-selector": "^6.4.0",
    "@capacitor/android": "5.3.0",
    "@capacitor/app": "^5.0.0",
    "@capacitor/camera": "^5.0.7",
    "@capacitor/core": "^5.0.0",
    "@capacitor/haptics": "^5.0.0",
    "@capacitor/ios": "^5.0.0",
    "@capacitor/keyboard": "^5.0.0",
    "@capacitor/status-bar": "^5.0.0",
    "@ionic-native/market": "^5.36.0",
    "@ionic/angular": "^6.3.7",
    "@ionic/storage-angular": "^3.0.6",
    "call-number": "^1.0.1",
    "cordova-clipboard": "^1.3.0",
    "cordova-open-native-settings": "^1.5.5",
    "cordova-plugin-advanced-http": "^3.3.1",
    "cordova-plugin-android-permissions": "^1.1.5",
    "cordova-plugin-file": "^7.0.0",
    "cordova-plugin-file-transfer": "github:apache/cordova-plugin-file-transfer",
    "cordova-plugin-filepath": "^1.6.0",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-google-analytics": "^1.9.3",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-nativegeocoder": "^3.5.1",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-plugin-splashscreen": "^6.0.2",
    "cordova-sqlite-storage": "^6.1.0",
    "cordova-wheel-selector-plugin": "^1.1.7",
    "cordova.plugins.diagnostic": "^7.1.2",
    "jetifier": "^2.0.0",
    "moment": "^2.29.3",
    "ng-circle-progress": "^1.7.1",
    "onesignal-cordova-plugin": "^3.0.1",
    "phonegap-plugin-barcodescanner": "^8.1.0",
    "rxjs": "~6.6.0",
    "tinycolor2": "^1.6.0",
    "tslib": "^2.4.1",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.2",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.12",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^14.2.12",
    "@angular/compiler": "^14.3.0",
    "@angular/compiler-cli": "^14.3.0",
    "@angular/language-service": "^14.3.0",
    "@capacitor/cli": "^5.3.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

1. I set the ECMAScript version in the tsconfig.json file in the compilerOptions->target field to “es2020”.
2. Clean the project from the bash console: rm -rf node_modules && rm package-lock.json && npm cache clean --force
3. I installed the dependencies, compiled the app and synchronized the app with android, opened the project in android studio: npm install && npx jetify && ionic build && ionic cap add android && npx cap sync android && ionic cap open android
4. When opening the project in android studio I am having a problem with a dependency when creating the project structure, which I solve by going to File->Project Structure->Dependencies->Modules->app->barcodescanner-release -2.1.5 and change the value of the “Configuration” field to “implementation”. Apply the changes.
5. Then I compile the app with an emulator with the Pixer device with API 22.

and this way I get the following error message in the Chrome DevKit console:

Uncaught SyntaxError: Unexpected reserved word
(index):19226 The key "viewport-fit" is not recognized and ignored.
2VM33:1 Uncaught TypeError: Cannot read property 'triggerEvent' of undefined

Error capture:

Code Reproduction URL

https://github.com/FabriJuncal/myAppIonic

Ionic Info

The environment I am working in is the following:

Ionic:

   Ionic CLI                     : 7.1.1 (C:\Users\Fabricio\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.7.5
   @angular-devkit/build-angular : 14.2.12
   @angular-devkit/schematics    : 14.2.12
   @angular/cli                  : 14.2.12
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 5.3.0
   @capacitor/android : 5.3.0
   @capacitor/core    : 5.3.0
   @capacitor/ios     : 5.3.0

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v16.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.8.1
   OS     : Windows 10

Additional Information

No response