CODEWITHSUNDEEP
ionic3
saber mirzaee
saber mirzaee

Reputation: 25

'angular-cropper' is not a known element

I have installed "angular-cropperjs" in my ionic project. I have also import"AngularCropperjsModule" in 'app.module.ts' as below

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {AngularFireStorageModule} from 'angularfire2/storage';
import { LazyLoadImageModule } from 'ng2-lazyload-image';
import {database} from 'firebase';
import {storage} from 'firebase';
import {HttpModule} from '@angular/http';
import {AngularFireDatabase} from 'angularfire2/database';

import { AngularCropperjsModule } from 'angular-cropperjs';

@NgModule({
  declarations: [AppComponent ],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(),
    AngularFireModule.initializeApp(FireBase_Config),
    AngularFireDatabaseModule,
    AngularFireStorageModule,
    LazyLoadImageModule,
    AngularCropperjsModule, 
    HttpModule,
    AppRoutingModule],        
  providers: [
    StatusBar,
    Camera,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

The component is declared in home.page.ts as below:

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import {storage, initializeApp} from 'firebase';
import { FireBase_Config } from '../firebase.config';
import {AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs/observable';
import {Http, Headers} from '@angular/http';
import {ConnectionBackend} from '@angular/http'
import { stringify } from '@angular/core/src/util';
import { Routes, Router } from '@angular/router';
import 'rxjs/add/operator/map' ;
import { AngularCropperjsComponent } from 'angular-cropperjs/index';
import { Crop } from '@ionic-native/crop/ngx';

@Component({
  selector: 'app-device',
  templateUrl: './device.page.html',
  styleUrls: ['./device.page.scss'],

})

export class DevicePage implements OnInit {
  @ViewChild('angularCropper') public angularCropper: AngularCropperjsComponent;
  cropperOptions: any;
  croppedImage = null;

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

  constructor(private camera: Camera,private router: Router, private http: Http) {
    this.cropperOptions = {
      dragMode: 'crop',
      aspectRatio: 1,
      autoCrop: true,
      movable: true,
      zoomable: true,
      scalable: true,
      autoCropArea: 0.8,
    };
    initializeApp(FireBase_Config);
    // this.files= this.dataProvider.getFiles();
    this.mypic=storage().ref('/'); 


  }
  public   root : string;
  ngOnInit() {

  }
}

but when I run ' in my home.page.html i get 'angular-cropper' is not a known element:' error.

I have tried anything know, any help is highly appreciated.

Upvotes: 1

Views: 2360

Answers (2)

Alejandro
Alejandro

Reputation: 144

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

Upvotes: 3

Sonia Goulevent
Sonia Goulevent

Reputation: 1

home.page.ts : here :

import { AngularCropperjsComponent } from 'angular-cropperjs/index';

replace :

import {AngularCropperjsComponent} from "angular-cropperjs";

if you do not have it, look in package.json:

"angular-cropperjs": "^0.1.5",

Upvotes: 0

Related Questions