Ionic Crop Plugin: 'plugin_not_found'


#1

I followed this tutorial to the letter in order to get image selection and cropping working in my Ionic App. Both the Camera and Image Picker is working perfectly but cropping fails for both. I already checked out this Ionic forum thread, but nothing there helped me. Here is an example of the code I used to take a picture then crop it:

takePicture() {
      let options: CameraOptions = {
         quality: 100,
         correctOrientation: true
      };
      this.camera.getPicture(options)
         .then((data) => {
            this.photos = new Array<string>();
            this.cropService
               .crop(data, { quality: 75, targetHeight: 800, targetWidth: 800 })
               .then((newImage) => {
                  this.photos.push(newImage);
               }, error => this.alertCtrl.create({ title: 'Error', subTitle: error, buttons: ['Dismiss'] }).present());
         }, function (error) {
            console.log(error);
         });
   }

I made sure to do all the imports. In my app.module.ts:

import { ImagePicker } from '@ionic-native/image-picker';
import { Camera } from '@ionic-native/camera';
import { Pro } from '@ionic/pro';
import { Crop } from '@ionic-native/crop';
@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [    
    ImagePicker,
    Camera,
    Crop,
    ...
  ]
})

And in my page where I use it, profile.ts:

import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';
import { Pro } from '@ionic/pro';
import { Camera,CameraOptions } from '@ionic-native/camera';
import { Crop } from '@ionic-native/crop';
constructor(public navCtrl: NavController,
      private imagePicker: ImagePicker,
      private camera: Camera,
      public cropService: Crop) {
        
   }

When I build this and deploy it to Ionic Pro, I open it in Ionic View and get the following error: ‘plugin_not_installed’.

Screen Recording for reference: https://drive.google.com/open?id=18WgqvIbwNU5LyH6tAS-HSthF_FSbaRoO

Environment setup:
IDE OS: Windows 10
Test Device: iPhone 6S Plus
Ionic Version: 3
Angular Version: 5

package.json extract:

"dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/camera": "^4.5.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/crop": "^4.5.3",
    "@ionic-native/image-picker": "^4.5.3",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "^1.0.16",
    "@ionic/storage": "2.1.3",
    "ave": "0.0.1-0",
    "cordova-plugin-camera": "^4.0.2",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-image-picker": "^1.1.3",
    "cordova-plugin-telerik-imagepicker": "^2.1.8",
    "ion2-calendar": "^2.1.5",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.20.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-image-picker": {},
      "com.synconset.imagepicker": {},
      "cordova-plugin-crop": {},
      "cordova-plugin-camera": {}
    }
  }

What am I doing wrong? Any help/pointers would be appreciated!


#2

Hi! Do you solved this issue?