Android 9: Uncaught SyntaxError: Unexpected token ?

Bug Report

When running a blank Ionic 6 project in android studio under API 28, I get this error The same project runs fine in Android 11 (API 30)

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 4.5.0
  @capacitor/core: 4.5.0
  @capacitor/android: 4.5.0
  @capacitor/ios: 4.5.0

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/cli: 4.5.0
  @capacitor/core: 4.5.0
  @capacitor/android: 4.5.0

Platform(s)

Android 9 (API 28) … code breaks Android 11 (API 30) … code works

Current Behavior

Under Android 9, I get this error

E/Capacitor/Console: File: http://localhost/ - Line 606 - Msg: SyntaxError: Unexpected token ?
E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token ?","url":"http://localhost/main.4c06c2ca476ba14a.js","line":1,"col":68137,"errorObject":"{}"}}
E/Capacitor/Console: File: http://localhost/main.4c06c2ca476ba14a.js - Line 1 - Msg: Uncaught SyntaxError: Unexpected token ?

This is a blank Ionic 6 project with not a single line added to it

Expected Behavior

Project opens

Code Reproduction

https://github.com/MarsamDA/testing

start a new project (selecting angular and blank)

ionic start

add android

ionic capacitor add android

build and copy project

ionic capacitor buildandroid

here i get these outputs

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: chrome 60
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...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
✔ Index html generation complete.

Other Technical Details

Android Studio: Dolphin | 2021.3.1 Patch 1 Build #AI-213.7172.25.2113.9123335, built on September 30, 2022

npm --version output: 8.6.0 node --version output: v16.18.1

Ionic Info:

Ionic:

   Ionic CLI                     : 6.20.4 (C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.3.7
   @angular-devkit/build-angular : 15.0.0
   @angular-devkit/schematics    : 15.0.0
   @angular/cli                  : 15.0.0
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.5.0
   @capacitor/android : 4.5.0
   @capacitor/core    : 4.5.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

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

Additional Context

package.json:

{
  "name": "testing",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/android": "4.5.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/core": "4.5.0",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.0",
    "@capacitor/status-bar": "4.1.0",
    "@ionic/angular": "^6.3.7",
    "ionicons": "^6.0.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular-eslint/builder": "^14.0.0",
    "@angular-eslint/eslint-plugin": "^14.0.0",
    "@angular-eslint/eslint-plugin-template": "^14.0.0",
    "@angular-eslint/template-parser": "^14.0.0",
    "@angular/cli": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@angular/language-service": "^15.0.0",
    "@capacitor/cli": "4.5.0",
    "@ionic/angular-toolkit": "^6.0.0",
    "@ionic/cli": "^6.20.4",
    "@types/jasmine": "~4.0.0",
    "@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": "~4.3.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.8.4"
  },
  "description": "An Ionic project"
}

tsconfig.json:

/*
  To learn more about this file see: https://angular.io/config/tsconfig.
*/
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2022",
    "module": "es2020",
    "lib": [
      "es2015",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

I tried modifying the “target” “module” and “lib” to see if it changes anything, but no luck

[jcesarmobile]

Last week we updated the ionic starter apps to use Angular 15 and Angular 15 only supports latest chrome https://angular.io/guide/browser-support

In previous versions @angular/cli still allowed us to support older versions by changing the target in tsconfig.json to "target": "es2015",, but they don’t allow it anymore and always use es2022. They now say that you have to use Browserlist to specify the supported browser versions. The starter templates have a .browserslistrc in which we specify Chrome >=60, but @angular/cli 15 says it’s ignoring that version. Changing the version to 61 or newer removes the warning, but doesn’t fix the issue.

Since your emulator has chrome 66 installed, it’s not going to work because of the mentioned Angular 15 limitation. Sadly, there is nothing we can do about it, you can try to repot the issue to angular team.

If you want to test on an Android 28 emulator, create one with Play Store, open it, log in and update the “Android System WebView” package.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.