capacitor: TypeError: cameraModal.present is not a function

I am using with following dependencies with ionic:

 "dependencies": {
    "@angular/common": "6.0.2",
    "@angular/core": "6.0.2",
    "@angular/forms": "6.0.2",
    "@angular/http": "6.0.2",
    "@angular/platform-browser": "6.0.2",
    "@angular/platform-browser-dynamic": "6.0.2",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "6.0.2",
    "@angular/service-worker": "6.0.2",
    "@capacitor/android": "^1.0.0-alpha.39",
    "@capacitor/cli": "^1.0.0-beta.1",
    "@capacitor/core": "^1.0.0-beta.1",
    "@ionic-native/core": "5.0.0-beta.10",
    "@ionic-native/splash-screen": "5.0.0-beta.10",
    "@ionic-native/status-bar": "5.0.0-beta.10",
    "@ionic/angular": "4.0.0-alpha.7",
    "@ionic/schematics-angular": "latest",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.3",
    "moment": "^2.22.2",
    "rxjs": "6.1.0",
    "ydn.db": "^1.3.0",
    "zone.js": "^0.8.26"
  }

When i try to use its camera plugin. i am getting error:

        const image = await Camera.getPhoto({
            quality: 90,
            allowEditing: true,
            source: CameraSource.Camera,
            resultType: CameraResultType.Base64
        });
        console.log(image.base64Data);

core.js:1598 ERROR Error: Uncaught (in promise): TypeError: cameraModal.present is not a function
TypeError: cameraModal.present is not a function
    at CameraPluginWeb.<anonymous> (camera.js:49)
    at step (tslib.es6.js:91)
    at Object.next (tslib.es6.js:72)
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at CameraPluginWeb.<anonymous> (camera.js:49)
    at step (tslib.es6.js:91)
    at Object.next (tslib.es6.js:72)
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at resolvePromise (zone.js:814)
    at zone.js:724
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
defaultErrorLogger @ core.js:1598
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
next @ core.js:4727
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
(anonymous) @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
onHandleError @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 38 (10 by maintainers)

Most upvoted comments

@mlynch thank you sir. One small issue, it worked just fine in my Ionic app by including it in the index.html, I wasn’t able to make it work by importing in my main.ts (as you suggested import '@ionic/pwa-elements'; ). How can I make it work in the Ionic4-angular way ?

+5
dalepo on Oct 11, 2018

@dalepo @dacrypt @coffeymatt After a non-trivial amount of time, I got Ionic 4 + Angular to work with local sources using npm i @ionic/pwa-elements rather than referencing the external script https://unpkg... in index.html.

If I’m not mistaken, @ionic/pwa-elements are simply a bunch of web components built with Stencil. To make them work the Angular way, I followed the guide for Angular integration with Stencil:

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window);

The CameraModal component relies on a few svg files for icons, so you’ll want Angular to copy those assets on build as well:

angular.json

/* ... */
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            /* ... */
            "assets": [
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements/icons",
                "output": "icons"
              },
/* ... */

A 404 error with ionicpwaelements.js still happens when it tries to fetch ionicpwaelements/ionicpwaelements.d8e4i292.js. If you try to resolve that error by including all the scripts in dist/ionicpwaelements via angular.json’s assets, it ends up breaking Ionic modals, as was referenced much earlier in this thread. Not sure if that has ever been addressed yet.

+4
CFT-Chris on Feb 26, 2019

@foli @corysmc I got this fixed and my PR just got merged: https://github.com/ionic-team/ionic-pwa-elements/pull/8. Will hopefully get released soon.

+4
simonhaenisch on Nov 16, 2018

Hi all, just went through and updated @ionic/pwa-elements to the latest of both stencil and ionic, and the new build is looking good. Can you try it and let me know how it works?

<script src="https://unpkg.com/@ionic/pwa-elements@1.0.0/dist/ionicpwaelements.js"></script>

Or, to bundle it:

import '@ionic/pwa-elements';

Also added some friendly docs on it: https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/

+3
mlynch on Oct 5, 2018

upgrade your typescript to latest version globally and inside app. npm install -g typescript@latest npm install typescript@latest

+1
GoturShrinivasa on Aug 24, 2022

That was fixed in pwa elements 1.0.1

+1
jcesarmobile on Feb 21, 2019

Unsure about that exactly, it’s supposed to work, assuming you have a bundler like webpack. Will ask around

+1
mlynch on Oct 17, 2018

@dalepo just found in Capacitor examples: https://github.com/ionic-team/capacitor/search?q=pwa-elements&unscoped_q=pwa-elements

BTW, I can see it as a dependency of Capacitor package, but I don’t understand why once compiled it doesn’t contain all files to make it working directly.

Maybe they want to keep them separated? Or maybe that’s just due to the beta hmmm

+1
sneko on Sep 28, 2018

for now, I think you must include <script src='https://unpkg.com/@ionic/pwa-elements@0.0.14/dist/ionicpwaelements.js'></script> in index.html

+1
ljieyao on Jul 14, 2018
Read more comments on GitHub
← capacitor: Transpile error after import capacitor/core
cordova-plugin-ionic-webview: 2.x on iOS: incompatibility with cordova-hot-code-push-plugin - showing white page after app was killed and restarted →