运行 ionic cordova add platform android 后的 Ionic 3，我的 ionic-native/file,filepath,transfer 发生错误

Question

I have the error like in question, when I'm trying to design my application to call native.camera, I see my console in ionic 3 project, I saw this error :

Native : tried calling Camera.getPicture, but Cordova is not available. Make sure to include cordova.js or run in a device / simulator.

Here is the code that I used to called native camera.

This is the code in my problem.html

 <button class="logoCamera" ion-button (click)="presentActionSheet()">
    <ion-icon name="camera" ></ion-icon>

This is the code in my problem.ts

import { File } from '@ionic-native/file';
import { Transfer, TransferObject} from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';

public presentActionSheet(){
let actionSheet = this.actionSheetCtrl.create({
  title: 'Select Image',
  buttons: [
    {
      text: 'Load from Library',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
      }
    },
    {
      text: 'Use Camera',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.CAMERA);
      }
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
  ]
});
actionSheet.present();
}

public takePicture(sourceType){
//Create option for the Camera dialog
var options = {
  quality: 100,
  sourceType : sourceType,
  saveToPhotoAlbum: false,
  correctOrientation: true
};

//Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
  //special handling for android lib
  if(this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
      .then(filePath => {
        let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1 );
        let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
      });
  } else {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/')+ 1);
    this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
  }
}, (err) => {
  this.presentToast('Error while selecting Image.');
});
}

       //Create a new name for image
      private createFileName() {
        var d = new Date(),
        n = d.getTime(),
        newFileName = n + ".jpg";
        return newFileName;
      }

      //copy image to local folder
      private copyFileToLocalDir(namePath, currentName, newFileName) {
        this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
          this.lastImage = newFileName;
        }, error => {
          this.presentToast('Error while storing file.');
        });
      }

    private presentToast(text) {
      let toast = this.toastCtrl.create({
        message: text,
        duration: 3000,
        position: 'middle'
      });
      toast.present();
    }

    public pathForImage(img){
      if (img === null) {
        return '';
      } else {
        return cordova.file.dataDirectory + img;
      }
    }

    public uploadImage() {
      //destination URL
      var url = "";

      //file to upload 
      var targetPath = this.pathForImage(this.lastImage);

      //file name only
      var filename = this.lastImage;

      var options = {
        fileKey: "file",
        fileName: filename,
        chunkedMode: false,
        mimeType: "multipart/form-data",
        params: {'fileName': filename}
      };

      const fileTransfer: TransferObject = this.transfer.create();

      this.loading = this.loadingCtrl.create({
        content: 'Uploading...',
      });
      this.loading.present();

      //use FileTransfer to upload image
      fileTransfer.upload(targetPath, url, options).then(data => {
        this.loading.dismissAll()
        this.presentToast('Image successful uploaded.');
      }, err => {
        this.loading.dismissAll()
        this.presentToast('Error while uploading file.');
      });
    }

When I run ionic serve, everything is smooth, no error, no nothing.

But when I click my button to access natve camera, the error shows, please help me figure out the problem, I check a lot of web, and none of it solve my question.

After I try run ionic cordova run ios --simulator, there are error coming out, but I am pretty sure that this error does not exist before I run this command.

May I know how to solve this problem ??

Answer 1

The error message is pretty accurate here:

Native : tried calling Camera.getPicture, but Cordova is not available. Make sure to include cordova.js or run in a device / simulator .

Running ionic serve does not include cordova.js nor does it run your application in a simulator or on a device which is why you get the error. You can fix it either by running your application on the device or simulator:

ionic cordova run android/ios --device/--simulator

Or by adding the browser platform:

cordova platform add browser

And running the browser platform:

ionic cordova run browser