'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.