Angular 8 Ngx-image-cropper 不是 Angular 模块 - 导入错误答案

【问题标题】：Angular 8 Ngx-image-cropper is not an angular module - import errorAngular 8 Ngx-image-cropper 不是 Angular 模块 - 导入错误
【发布时间】：2020-04-10 11:17:40
【问题描述】：

我正在尝试实现 ngx-image-cropper。我制作了一个将使用图像裁剪器的组件，并将导入添加到导入部分，如下所示：

import { ImageCropperModule } from 'ngx-image-cropper';

@NgModule({
imports: [
CommonModule,
ImageCropperModule
],

但我得到了

类 ImageCropperModule 不是 Angular 模块

有人对此有解决方案吗？

【问题讨论】：

您正在使用哪个版本的 Angular？
我安装了这个1.3.10，它对我有用npm install ngx-image-cropper@1.3.10 --save

标签： angular

【解决方案1】：

检查一下。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { ImageCropperModule } from 'ngx-image-cropper';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';



@NgModule({
  imports:      [ BrowserModule, FormsModule, ImageCropperModule ],
  declarations: [ AppComponent, HelloComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ImageCroppedEvent } from 'ngx-image-cropper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  imageChangedEvent: any = '';
  croppedImage: any = '';

  fileChangeEvent(event: any): void {
      this.imageChangedEvent = event;
  }
  imageCropped(event: ImageCroppedEvent) {
      this.croppedImage = event.base64;
  }
  imageLoaded() {
      // show cropper
  }
  cropperReady() {
      // cropper ready
  }
  loadImageFailed() {
      // show message
  }
}

app.component.html

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />

Working Demo

【讨论】：