时间戳

首页 > 解决方案 > 'angular-cropper' 不是已知元素

ionic3 - 'angular-cropper' 不是已知元素

问题描述

我在我的 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' is not a known element:' 错误。

我已经尝试过任何知道的事情，非常感谢任何帮助。

标签： ionic3

解决方案

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

推荐阅读