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

[dalepo]

@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 ?

[CFT-Chris]

@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.