Ionic 4 Camera/ActionSheet Object(...) 不是函数

Question

我正在尝试在 Ionic 4 中使用 Camera Plugin，当服务启动时没有错误，在浏览器控制台中出现此错误：

我删除文件夹 node_modules 并重新安装它，但无法修复此问题。

npm install

使用 ActionSheet 我有同样的错误。

包中的依赖项：

"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"
  },

谢谢

编辑：当我试图编译它时！（使用操作表）

--详细：

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(
    ^

仅当某些 TS 文件具有导入时才会出现此错误。用了没关系

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

Answer 1

确保您已正确安装相机插件和节点模块

第 1 步：删除当前节点模块并使用

重新安装

 npm install

第 2 步：重建平台（删除旧平台）并安装插件

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

在你的 TS 文件中

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

我已经解决了！

我需要安装@5.0.0-beta.17 包。

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

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

然后，我可以将它用于：

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

Ionic 4 Camera/ActionSheet Object(...) 不是函数

Ionic 4 Camera/ActionSheet Object(...) is not a function

object

ionic-framework

cordova-plugins

ionic4