Не удается заставить ColorThief корректно работать в Angular, библиотечные методы не найдены?

Question

Я пытаюсь использовать библиотеку ColorThief(https://lokeshdhakar.com/projects/color-thief/) в проекте Angular 12, но мне не удалось заставить ее работать. Я начал с того, что делал $ npm i --save colorthief а затем в моем желаемом файле компонента .ts:
const ColorThief = require('colorthief');.

Все компилируется правильно, но некоторые методы не распознаются при запуске в браузере.

Я также попытался добавить тег скрипта в свой файл index.html, но безуспешно.

Файл My Component TS:

      import { Color } from '../shared/model/color';
const ColorThief = require('colorthief');
//import ColorThief from 'angular-colorthief';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewInit {
...
autoGeneratePalette(numColors:number) {
    this.userPalette = [];
      this.paletteCounter = 0;
    //var ColorThief:any = new ColorThief();
      ColorThief.getPalette(this.imgToUse, numColors)
      .then((palette: any) => {
      for(var i = 0; i < palette.length; i++) {
        var color = new Color(0,0,0,0);
        color.red = palette[i][0];
        color.green = palette[i][1];
        color.blue = palette[i][2];
        color.index = i;
        this.userPalette.push(color);
      }
    })
    .catch((err: any) => {console.log(err)});
    }
}

У кого-нибудь есть идеи, что я делаю неправильно? Или кто-то, кто успешно использовал ColorThief в Angular?

Answer 1

      import ColorThief from 'colorthief'

ngOnInit(){

    const img = document.querySelector('img');


    const colorThief = new ColorThief();

    if (img.complete) {
     // colorThief.getColor(img);
      this.mopl = colorThief.getColor(img)
    } else {
      img.addEventListener('load', () => {
       // colorThief.getColor(img);
        this.mopl = colorThief.getColor(img)
      });
    }
}