'angular-cropper' is not a known element

[ahmedsaeedsaid]

app.module.ts => ..

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignInPage } from '../pages/sign-in/sign-in';
import { RegisterPage } from '../pages/register/register';
import { ConvertPage } from '../pages/convert/convert';
import { ConvertPageModule } from '../pages/convert/convert.module';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { Camera } from '@ionic-native/camera';

@NgModule({
declarations: [
MyApp,
HomePage,
SignInPage,
RegisterPage
],
imports: [
BrowserModule,
AngularCropperjsModule,
ConvertPageModule,
IonicModule.forRoot(MyApp),

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
SignInPage,
RegisterPage,
ConvertPage
],
providers: [
StatusBar,
SplashScreen,
Camera,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

})

export class AppModule {}

convert.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera,CameraOptions } from '@ionic-native/camera';
import { AngularCropperjsComponent } from 'angular-cropperjs';
/**

• Generated class for the ConvertPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation.
  */

@IonicPage()
@component({
selector: 'page-convert',
templateUrl: 'convert.html',
})
export class ConvertPage {
@ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;
cropperOptions: any;
croppedImage = null;

myImage = null;
scaleValX = 1;
scaleValY = 1;

constructor(public navCtrl: NavController, private camera: Camera) {
this.cropperOptions = {
dragMode: 'crop',
aspectRatio: 1,
autoCrop: true,
movable: true,
zoomable: true,
scalable: true,
autoCropArea: 0.8,
};
}

captureImage() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.CAMERA
}

this.camera.getPicture(options).then((imageData) => {
  this.myImage = 'data:image/jpeg;base64,' + imageData;
});

}

reset() {
this.angularCropper.cropper.reset();
}

clear() {
this.angularCropper.cropper.clear();
}

rotate() {
this.angularCropper.cropper.rotate(90);
}

zoom(zoomIn: boolean) {
let factor = zoomIn ? 0.1 : -0.1;
this.angularCropper.cropper.zoom(factor);
}

scaleX() {
this.scaleValX = this.scaleValX * -1;
this.angularCropper.cropper.scaleX(this.scaleValX);
}

scaleY() {
this.scaleValY = this.scaleValY * -1;
this.angularCropper.cropper.scaleY(this.scaleValY);
}

move(x, y) {
this.angularCropper.cropper.move(x, y);
}

save() {
let croppedImgB64String: string = this.angularCropper.cropper.getCroppedCanvas().toDataURL('image/jpeg', (100 / 100));
this.croppedImage = croppedImgB64String;
}

}

[knito]

I resolved the issue when I add the module into the page's module.ts. Not in the app.module.ts

[BluebambooSRL]

@knito thanks for the tip. Did you implemented with Angular +7?

[knito]

@BluebambooSRL, No, I was playing just with ionic.