如何通过 angular-cli 将 Cropper.js 用于 Angular2 项目？

Question

我想使用 cropper.js (https://github.com/fengyuanchen/cropperjs) 通过 angular-cli 创建一个 Angular2 裁剪器。

我的指令是：

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"
],

我没有任何解决问题的想法..

Answer 1

我认为 cropper 没有打字所以当你做 import Cropper from 'cropperjs'; 它不起作用

简单的解决方案是 typings.d.ts 添加

declare var Cropper: any;

它将让 typscript 以动态方式与 cropper 一起工作

删除您拥有的导入

正确的解决方案是导入 install typings

npm install --save @types/cropperjs

如何通过 angular-cli 将 Cropper.js 用于 Angular2 项目？

How to use Cropper.js into Angular2 project with angular-cli?

typescript

angular-cli

cropper

angular