bug: (critical) Blank screen startup (only on device); error of Capacitor libraries

Bug Report

Capacitor Version

2.4.6 (for all packages)

This happens when opening the app in a device, and debugging it with Chrome Remote Devices. Nothing can be seen, just a blank screen (while the “ionic serve” app in desktop works perfectly normal):

onscript loading complete
capacitor-runtime.js:358 TypeError: fn.bind is not a function
    at newTrustedFunctionForJIT (vendor-es2015.js:10992)
    at JitEvaluator.evaluateCode (vendor-es2015.js:11056)
    at JitEvaluator.evaluateStatements (vendor-es2015.js:11030)
    at CompilerFacadeImpl.jitExpression (vendor-es2015.js:24424)
    at CompilerFacadeImpl.compileNgModule (vendor-es2015.js:24354)
    at Function.get (vendor-es2015.js:115380)
    at getNgModuleDef (vendor-es2015.js:89506)
    at assertNgModuleType (vendor-es2015.js:89685)
    at compileNgModuleFactory__POST_R3__ (vendor-es2015.js:117414)
    at PlatformRef.bootstrapModule (vendor-es2015.js:117661)
capacitor.handleError @ capacitor-runtime.js:358
vendor-es2015.js:10992 Uncaught TypeError: fn.bind is not a function
    at newTrustedFunctionForJIT (vendor-es2015.js:10992)
    at JitEvaluator.evaluateCode (vendor-es2015.js:11056)
    at JitEvaluator.evaluateStatements (vendor-es2015.js:11030)
    at CompilerFacadeImpl.jitExpression (vendor-es2015.js:24424)
    at CompilerFacadeImpl.compileNgModule (vendor-es2015.js:24354)
    at Function.get (vendor-es2015.js:115380)
    at getNgModuleDef (vendor-es2015.js:89506)
    at assertNgModuleType (vendor-es2015.js:89685)
    at compileNgModuleFactory__POST_R3__ (vendor-es2015.js:117414)
    at PlatformRef.bootstrapModule (vendor-es2015.js:117661)
vendor-es2015.js:66530 Ionic Native: deviceready event fired after 57 ms
DevTools failed to load SourceMap: Could not load content for http://localhost/runtime-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED
DevTools failed to load SourceMap: Could not load content for http://localhost/polyfills-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED
DevTools failed to load SourceMap: Could not load content for http://localhost/main-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED
DevTools failed to load SourceMap: Could not load content for http://localhost/vendor-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED

Platform(s)

Only tested in Android so far. Doesn’t happen in the normal web app when developing with “ionic serve”.

Current Behavior

The app works perfectly as intended when served as a web app, as aforementioned. But it won’t start or do anything in an Android device: it just throws that stacktrace that I mentioned above.

Expected Behavior

App should start as normal in the device.

Other Technical Details

npm --version output: 6.14.11

node --version output: 15.7.0

This is my dependency list, do you see anything that could be causing this error?

  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/android": "^2.4.6",
    "@capacitor/core": "^2.4.6",
    "@capacitor/ios": "^2.4.6",
    "@ionic-native/camera": "^5.28.0",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/crop": "^5.28.0",
    "@ionic-native/file": "^5.28.0",
    "@ionic-native/geolocation": "^5.26.0",
    "@ionic-native/image-picker": "^5.28.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.5.4",
    "@types/googlemaps": "^3.39.7",
    "@types/parse": "^2.12.1",
    "angularx-social-login": "^3.2.2",
    "cordova-android": "^8.1.0",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-telerik-imagepicker": "^2.3.5",
    "jetifier": "^1.6.6",
    "moment": "^2.26.0",
    "parse": "^2.13.0",
    "rxjs": "~6.5.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@angular/cli": "~11.1.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "^2.4.6",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  },

[dsalazarRedelcom]

I know this issue is marked as closed, but I’m currently having the exact same problem with ionic 6.18.1. When I create a blank project, package.json and package-lock.json indicate that it uses angular (core, router, common, etc) ~13.0.0.

When I use the my-first-app template instead, it works perfectly inside the device. The only difference regarding angular I found was that said template used angular 12.0.1.

[mhartington]

Angular expects users to provide their own polyfils for APIs then need. To polyfill .bind, install this

https://github.com/leahciMic/polyfill-function-prototype-bind

npm install --save polyfill-function-prototype-bind

Then import it in your polyfills.ts file before zone.js

import 'polyfill-function-prototype-bind'


import './zone-flags';
import 'zone.js/dist/zone';

Also, be sure to do either a prod build or enable aot during dev builds by add "aot": true to your angular.json

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
+           "aot": true,
            "outputPath": "www",