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,
        });
    }

}

Но когда я запускаю приложение, Кроппер не определен. Я также пытаюсь импортировать медь, используя

declare var Cropper: any

но это также не работает. Я что-то пропустил?.
Спасибо за любую помощь.

Закрыто

Я обнаружил, что мне просто нужно указать cropperjs в tsconfig.json, и проблема решена.

{
  "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';