如何在使用angular-cli搭建的Angular2项目中使用Cropper.js？

Question

我希望使用cropper.js (https://github.com/fengyuanchen/cropperjs) 创建一个 Angular2 裁剪器，并且要使用 angular-cli。

我的指令代码如下：

import {Directive, ElementRef, Input, OnInit} from '@angular/core';
import Cropper from 'cropperjs';

@Directive({
  selector: '[ng2-cropper]'
})
export class Ng2CropperJsDirective implements OnInit {
  @Input('options') options: any = {};
  private cropper;
  constructor(private _element: ElementRef) { }

  ngOnInit(): void {
    console.log(Cropper);
    this.cropper = new Cropper(this._element.nativeElement, this.options);
  }
}

ng serve出错了： Cannot find module 'cropperjs'

但是cropperjs在node_modules中，而且我的angular-cli.json已经更新为：

"scripts": [
   "../node_modules/cropperjs/dist/cropper.js"
],

我不知道如何解决这个问题。

- Pierre-Luc BLOT

---

你是如何管理做到这一点的？能够帮忙并且给一个具体示例吗？ - Dkouk

Answer 1

我认为Cropper没有类型声明，因此当您执行import Cropper from 'cropperjs';时它不起作用。

解决方法是在typings.d.ts文件中添加以下内容：

declare var Cropper: any;

这将让TypeScript与裁剪器动态地配合使用

删除您所拥有的导入

正确的解决方案是导入安装类型定义文件

npm install --save @types/cropperjs

- Vova Bilyachat

---

Typescript可以使用此声明进行编译，但是出现了一个新的错误:/ 此错误的详细信息 - Pierre-Luc BLOT

@Pierre-LucBLOT在你加入angular-cli cropper.js之后，你有重新启动ng serve吗？ - Vova Bilyachat

我尝试了你的解决方案，但对我没有用。您能否向我指出任何使用CropperJS与Angular 4/5的样本项目？ - BlackBeard

@BlackBeard 指示您创建一个带有详细信息的问题。 - Vova Bilyachat