Question

我已经在离子项目中安装了“ 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：在这里：

从'angular-cropperjs / index'导入{AngularCropperjsComponent};

替换：

从“ angular-cropperjs”导入{AngularCropperjsComponent};

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

“ angular-cropperjs”：“ ^ 0.1.5”，

Answer 2

当我将模块添加到页面的module.ts中时，我解决了该问题。不在app.module.ts

中

'angular-cropper'不是一个已知的元素

2 个答案: