Ionic 4 Camera/ActionSheet Object(…) is not a func

Question

I'm trying to use Camera Plugin in Ionic 4, and when the serve is started without errors, in the browser console appears this error:

I remove the folder node_modules and reinstall it, but can't fix this.

npm install

With ActionSheet I have the same error.

Dependencies in Package:

"dependencies": {
    "@angular/common": "~6.1.1",
    "@angular/core": "^6.1.2",
    "@angular/forms": "~6.1.1",
    "@angular/http": "~6.1.1",
    "@angular/platform-browser": "^6.1.2",
    "@angular/platform-browser-dynamic": "~6.1.1",
    "@angular/router": "~6.1.1",
    "@ionic-native/action-sheet": "^4.11.0",
    "@ionic-native/camera": "^4.11.0",
    "@ionic-native/core": "^5.0.0-beta.14",
    "@ionic-native/file-transfer": "^4.11.0",
    "@ionic-native/network": "^4.11.0",
    "@ionic-native/splash-screen": "5.0.0-beta.14",
    "@ionic-native/status-bar": "5.0.0-beta.14",
    "@ionic/angular": "^4.0.0-beta.2",
    "@ionic/lab": "^1.0.6",
    "@ionic/ng-toolkit": "^1.0.6",
    "@ionic/schematics-angular": "^1.0.0",
    "cordova-android": "^7.1.1",
    "cordova-android-support-gradle-release": "^1.4.4",
    "cordova-ios": "4.5.5",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.5.3",
    "promise-polyfill": "^8.0.0",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.2.2",
    "zone.js": "^0.8.26"
  },

Thanks

EDIT: When I tried to compile it! (using ActionSheet)

--verbose:

ionic:cli-framework:utils:process onBeforeExit handler: process.exit received +0ms
  ionic:cli-framework:utils:process onBeforeExit handler: running 1 queued functions +6ms
  ionic:cli-framework:utils:process error while killing process tree for 8104: { Error: Command failed: taskkill /pid 8104 /T /F ERROR: no se encontr� el proceso "8104".  at ChildProcess.exithandler (child_process.js:275:12) at emitTwo (events.js:126:13) at ChildProcess.emit (events.js:214:7) at maybeClose (internal/child_process.js:925:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) killed: false, code: 128, signal: null, cmd: 'taskkill /pid 8104 /T /F' } +60ms
net.js:714
    throw new TypeError(
    ^

This error appears only if some TS file has the import. It does not matter if it is used.

import { ActionSheet, ActionSheetOptions } from '@ionic-native/action-sheet';

Answer 1

Make sure you have installed Camera plugin and node modules correctly

Step 1: Delete current node modules and reinstall using

 npm install

Step 2: Rebuild the platform (Delete old platform) and install plugin

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

In your TS file

import { Component } from '@angular/core';
import { IonicPage, NavController,ActionSheetController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-field-observation',
  templateUrl: 'field-observation.html',
})
export class FieldObservationPage {


 CapturedImageURL:any;


  constructor(
    public navCtrl: NavController, 
    private camera: Camera,
    public actionSheetCtrl: ActionSheetController,
    public storage:Storage
    ){



  }

  ionViewDidLoad() {
   }

captureImage() {
    const CamOptions: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.CAMERA,
      targetWidth:1024,
      targetHeight:720
    }

    this.camera.getPicture(CamOptions).then((imageData) => {
      console.log(imageData);
      this.CapturedImageURL = imageData;         
  });

  }

captureImageGallery(){

  const options: CameraOptions = {
              quality: 100,
              destinationType: this.camera.DestinationType.FILE_URI,
              encodingType: this.camera.EncodingType.JPEG,
              mediaType: this.camera.MediaType.PICTURE,
              sourceType:0,
              saveToPhotoAlbum:true,
              targetWidth:1024,
              targetHeight:720,
              allowEdit:true
  }
        this.camera.getPicture(options).then((imageData) => {
          this.CapturedImageURL = imageData; 
        });
}



 CameraActionSheet() {

   let actionSheet = this.actionSheetCtrl.create({
     title: 'Choose an image from',
     enableBackdropDismiss:true,
     buttons: [
       {
         text: 'Camera',
         icon: 'camera',
         handler: () => {
            this.captureImage();
         }
       },
       {
         text: 'Library',
         icon: 'image',
         handler: () => {
           this.captureImageGallery();
         }
       },
       {
         text: 'Cancel',
         role: 'cancel',
         icon:'close-circle',
         handler: () => {
           console.log('Cancel clicked');
         }
       }
     ]
   });

   actionSheet.present();
 }


}

Answer 2

I have solved it!

I need to install @5.0.0-beta.17 packages.

npm i -s @ionic-native/camera@5.0.0-beta.17

npm i -s @ionic-native/action-sheet@5.0.0-beta.17

Then, I can use it with:

import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; import { ActionSheet, ActionSheetOptions } from '@ionic-native/action-sheet/ngx';