Capacitor CLI usage in Angular App

Query:

I am trying to integrate Capacitor in my Angular App so to access the Native Android/iOS component like Camera,Location directly .
It is working before with Capacitor 2 but after the upgrade it is not working with Capacitor 3 giving the error

The ways i have tried separately

  • using the Camera Plugin from @Capactior/camera
  • Upgrading Both Fresh Capacitor App & Angular App @Capacitor/CLI
    @Capacitor/Core to latest version
  • Directly using the angular app server URL in capacitor.config.json in “server” key
  • Using the angular app server URL in anchor tag which is in index.html page
Error: "Camera" plugin is not implemented on android. Error: "Camera" plugin is not implemented on Android

Error: "Dialogs" plugin is not implemented on android. Error: "Dialogs" plugin is not implemented on Android

CODE

Written in Angular app to access the Camera in Native Android/iOS App

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      source: CameraSource.Prompt,
      resultType: CameraResultType.Base64
    });
    let imageUrl = image.base64String;
    this.image = "data:image/jpg;base64," + imageUrl;

Is this the correct way to use in the Production ?
The scenario of using Capacitor CLI in Angular App and using the same Angular App as an URL to integrate in Plain Capacitor App to access App Native Elements.

2 Likes

If you are moving from Capacitor 2 to Capacitor 3, you also have to update @capacitor/android package.

And also, you have to register the plugins in MainActivity.java, or enable the automatic registering by removing the init method from MainActivity.java

Hii @jcesarmobile ,
I have update the @capacitor/android package to latest & also removed the init method in MainActivity.java.

Still same issue is coming

have you run npm run build and npx cap copy after updating @capacitor/core 3.0.0?
if the problem persists can you share your app?

Hii @jcesarmobile ,
You can find the code here

Client is the Capacitor App you can run normally
Server is the Angular app , you can build and run it on local http server

The link of this server you can put inside the index.html file in Client App in
Anchor Tag
You can test it

I don’t see the Camera plugin installed in any of the projects. The code in the client app is importing Camera from core, not from capacitor/camera

I have tried the same importing from capacitor/camera , but it is not working.
Although it is importing from capacitor/core, but it should work this way i guess.
Is it possible the way i am trying to do or not ?
@jcesarmobile

Not the camera , but any of the Plugin is not working even Dialogs & Location