'angular-cropper' 不是已知元素

Question

我已经在我的 ionic 项目中安装了 "angular-cropperjs"。我还在 'app.module.ts' 中导入 "AngularCropperjsModule"，如下所示

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 {}

组件在home.page.ts中声明如下：

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() {

  }
}

但是当我运行 ' 在我的 home.page.html 中时，我得到 'angular-cropper' 不是已知元素：'错误。

我已经尝试过任何已知的方法，非常感谢任何帮助。

Answer 1

home.page.ts : 这里 :

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

替换：

import {AngularCropperjsComponent} from "angular-cropperjs";

如果没有，请查看package.json：

"angular-cropperjs": "^0.1.5",

Answer 2

我在将模块添加到页面 module.ts 时解决了这个问题。不在应用程序中。module.ts

'angular-cropper' 不是已知元素

'angular-cropper' is not a known element

ionic3