Ionic 4 and Cordova, Capacitor incompatbility

Ionic Native
1

Have built a simple camera app in Ionic 3 using Cordova and everything worked fine and the Camerea came up in Ionic Devap.
Did the same thing for Ionic 4 and not working. First off Ionic 4 loaded the @ionic-native/camera version ^4.15.0 which produced error

Uncaught TypeError: Object(...) is not a function
    at index.js:200
    at Object../node_modules/@ionic-native/camera/index.js (index.js:260)
    at __webpack_require__ (bootstrap:81)

upgrading ^4.15.0 to ^5.0.0-beta.14 and changing the import routine from

import { Camera } from '@ionic-native/camera';

to

import { Camera } from '@ionic-native/camera/ngx';

solved the problem (thanks to the forums).

Now,however, while showing on Ionic Devapp, pressing the “take Photo” button does nothing. There are no errors, messages or console logs, just nothing. Also running Ionic Cordova emulate Android produces a blank screen, not even the home page is showing.

So turned to Capacitor with Ionic 4 and running npx cap open android get a gradle error

Cause: com.novoda.gradle.release.AndroidLibrary$LibraryUsage.getDependencyConstraints()Ljava/util/Set;

This is the standard 4.6 gradle from Android Studio 3.2.1. I pointed it to 4.10.2 and it runs OK. Now when the app opens in the emulator I get the Capacitor splash-screen then an error

(intermediate value).fill is not a function
TypeError: (intermediate value).fill is not a function
    at Object.push../node_modules/@angular/core/fesm5/core.js (https://localhost:4638/vendor.js:44497:46)

with “@angular/core”: “~6.1.1”

So could someone put up a simple project that uses the phone’s camera to display a photo in an img tag that uses (a) cordova or (b) capacitor and could they also outline the steps taken (or versions modified) to achieve this because the steps as described in Ionic 3 tutorials don’t work for Ionic 4, or the versions are off, or something.

2

So you rather like to use Cordova or Capacitor? What’s you goal? I just ask because I don’t get why you are trying to use the Cordova Camera with Capacitor since its offer a nice API to to do it. If you are willing to use Capacitor for that purpose, just go with it https://capacitor.ionicframework.com/docs/apis/camera

3

You have misunderstood…have created 2 separate apps as the Cordova app wouldn’t work. Same with the Capacitor app…it won’t work with Ionic 4…if you have a simple working app then please share it.

4

I’m putting together a quick Ionic v4 + Capacitor camera together…give me 5

5

@SuperRoo here you go, Ionic v4+capacitor dummy project, could confirm I could build it and start the app in the Android simulator. Of course there is no camera in the simulator, when I tried to took the picture I couldn’t but the rest is fine, if you try with a real phone will work

1 Like
6

Thanks for that. Still getting error in emulator:

(intermediate value).fill is not a function
TypeError: (intermediate value).fill is not a function
    at Object.push../node_modules/@angular/core/fesm5/core.js (https://localhost:4638/vendor.js:44497:46)

I ran it on the phone & it works so must be in the Android Studio setup. Was a real help getting an app that works so I could determine where the problem is…still have issues with Android Studio as mentioned previously so might remove and reinstall.

Thanks again

7

Found the problem with the emulator…initially used basic Nexus 7 (Android 6) whereas the phone is an HTC Ultra (Android 8)…created a new AVD with Android 8 and app works perfectly on it.
Thanks again

8

Cool to hear it helped and that you found the solution!

However I ask my self why you were facing that ES5 problem with the first AVD you tried, maybe there is an open issue somewhere regarding Android < 7 ?