angular - angular2 导入cropperjs

Question

在我的 Angular 2 应用程序中，我将CropperJS导入如下

1. npm install --save @types/cropperjs npm install --save cropperjs
2. 在 .angular-cli.json 中，添加

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

3. 在 app.component.ts 中。我按照本指南导入 Cropper

import * as Cropper from 'cropperjs';

// declare var Cropper: any
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    title = 'How Everything Work';
    @ViewChild('photo') photo: ElementRef;

    constructor() {
    }

    ngOnInit() {    
        var cropper = new Cropper(this.photo.nativeElement, {
               aspectRatio: 16 / 9,
        });
    }

}

但是当我运行应用程序时，Cropper 是未定义的。我也尝试使用导入铜

declare var Cropper: any

但它也不起作用。我错过了什么 ？。
谢谢你的帮助。

关闭。

我发现，我只需要在 tsconfig.json 中指定cropperjs，问题就解决了。

{
  "compileOnSave": false,
  "compilerOptions": {
    ....
    ...
    "type":[
      "cropperjs"
    ]
  }
}

在 .angular-cli.json 中，我们不需要将cropper.min.js”添加到“scripts”字段

----> we don't need add cropper.min.js here
"scripts": [
  "../node_modules/cropperjs/dist/cropper.min.js"
],

Answer 1

1 . 安装cropperjs包

npm install cropperjs --save

2 . 安装cropperjs TypeScript类型以获得IDE支持

npm install @types/cropperjs --save

3 . 在angular-cli.json添加路径.css和.js文件

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

4 . 在tsconfig.json将cropperjs添加到types数组中

"compilerOptions": {
    ...
    "types":[
      "cropperjs"
    ]
  }

5 . 在 typings.d.ts 添加以下声明

declare module 'cropperjs/dist/cropper.js' {
  import Cropper from 'cropperjs';
  export default Cropper;
}

6 . 在您的文件中导入cropperjs.ts

import Cropper from 'cropperjs';