Cropperjs не работает в угловой 2

Question

Я пытаюсь использовать библиотеку cropperjs в проекте Angular. Пример обрезки из документации прекрасно работает на обычной статической веб-странице (простой index.html с <script> тег для js и ссылка на файл cropper.css).

Но по какой-то причине это не работает. Кроппер вроде грузится (console.log(Cropper) выполняет функцию), и есть некоторая функциональность, но похоже, что стиль отсутствует.

cropper.component.ts

import {Component} from "@angular/core";

var foo = require('cropperjs/dist/cropper');


@Component({
  selector: "cropper",
  template: `
    <div>
      <img id="image" src="https://dl.dropboxusercontent.com/s/vyeh3vqc93hbye4/Capture%20d%27%C3%A9cran%202016-05-27%2017.14.53.png?dl=0">
    </div>
  `,
  styleUrls: ['../styles/cropper.css', '../styles/cropper.component.css']
})
export class CropperComponent implements OnInit{
  ngOnInit(){
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      crop: function(e) {
        console.log(e.detail.x);
        console.log(e.detail.y);
        console.log(e.detail.width);
        console.log(e.detail.height);
        console.log(e.detail.rotate);
        console.log(e.detail.scaleX);
        console.log(e.detail.scaleY);
      },
    });
  }
}

Answer 1

Что касается инструментов разработчика, то в тегах, добавленных cropper.js, не было добавленных пользовательских атрибутов, которые Angular использует для стилей (те, которые выглядят _ngcontent-xpk-4), поэтому стилизация cropperjs не работает.

Просто добавив cropper.css (<link rel="stylesheet" href=".../cropper.css">) в index.html вместо того, чтобы ссылаться на него в компоненте, решившем это.