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

1. 在app.component.ts中。我导入Cropper跟随this guide

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

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

的闭

我发现，我只需要将cropperjs指定为tsconfig.json并解决问题。

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

在.angular-cli.json中，我们不需要添加cropper.min.js＆＃34; to＆＃34; scripts＆＃34;字段

----> 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 即可。为IDE支持安装 cropperjs TypeScript类型

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 即可。在.ts文件

中导入 cropperjs

import Cropper from 'cropperjs';