Cannot make ionic 5 project work using capacitor on simulator/device

@kdefombelle wrote:

Hello,

ion build --prod and test in browser are ok.
Now I would like to test my capacitor feature (open the camera) on the devices but I am not knowledgeable enough to understand why what’s generated by the frameworks is not working and I am running out of ideas.

In short any good hint to build something that is working on iOS device or Android simulator?

I build as follows:

ionic build
npx cap copy
npx cap open android

ios simulator: ok but cannot test capacitor camera plugin which is only available on real device

on iphone XR: nok the app crashes as soon as started with below error message

dyld: Library not loaded: @rpath/Capacitor.framework/Capacitor
Referenced from: /private/var/containers/Bundle/Application/5CB1FD35-1C30-48BC-B653-5274AC471845/MyApp.app/MyApp
Reason: no suitable image found. Did find:
/private/var/containers/Bundle/Application/5CB1FD35-1C30-48BC-B653-5274AC471845/MyApp.app/Frameworks/Capacitor.framework/Capacitor: code signature invalid for ‘/private/var/containers/Bundle/Application/5CB1FD35-1C30-48BC-B653-5274AC471845/MyApp.app/Frameworks/Capacitor.framework/Capacitor’

android simulator: nok the project generated cannot be built, error is:

Manifest merger failed : Attribute application@appComponentFactory

If I add the below to gradle.properties - as per stackoverflow
android.enableJetifier=true
android.useAndroidX=true
then it enables to build but crashes as soon as started on the simulator

The capacitor code I introduced is the following

import { Component, OnInit, Input } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { Plugins, CameraSource, CameraResultType } from "@capacitor/core";
const { Camera } = Plugins;
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
@Component({
  selector: "app-tab5",
  templateUrl: "tab5.page.html",
  styleUrls: ["tab5.page.scss"],
})
export class Tab5Page implements OnInit {
  imageTaken: boolean;
  image: SafeResourceUrl;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private sanitizer: DomSanitizer
  ) {}

ngOnInit() {}

async takePhoto() {
    const result = await Camera.getPhoto({
      quality: 75,
      allowEditing: true,
      source: CameraSource.Camera,
      resultType: CameraResultType.Uri,
    });
    this.image = this.sanitizer.bypassSecurityTrustUrl(result.webPath);
    this.imageTaken = true;
  }
}

Thank you,

PS: ionic info

Ionic:

   Ionic CLI                     : 6.6.0 (/Users/me/applications/node-v10.15.3-darwin-x64/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.1
   @angular-devkit/schematics    : 9.1.1
   @angular/cli                  : 9.1.1
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : 0.12.1
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v10.15.3 (/Users/me/applications/node-v10.15.3-darwin-x64/bin/node)
   npm               : 6.14.4
   OS                : macOS Catalina
   Xcode             : Xcode 11.4 Build version 11E146

Posts: 1

Participants: 1

Read full topic