CamanJs с угловым 6

Question

Я пытаюсь использовать camanjs с angular 6. Как добавить js lib и использовать его с angular, когда для npm нет типов для него.Я следую многим шагам

• установить caman, используя npm

• , добавив его в angular.json как скрипт, используя его путь в узлах модулей

• импортировать его в компонент, например

import * как Caman из «пути к caman в модуле узла»

• в AfterViewInit я использую его как

  ngAfterViewInit() {
       Caman('#image-id', function () {
            this.brightness(10);
            this.contrast(20);
          });
     }

, но при запуске сервера я получаю эту ошибку

ссылка на код: https://stackblitz.com/edit/angular-d5g941

Answer 1

Внутри .angular-cli.json scripts массива, добавьте путь к caman

"scripts": [
    "../node_modules/path-to-caman"
],

В случае Angular 6 в массиве angular.json scripts, добавьте путь к caman

"scripts": [
    "node_modules/path-to-caman"
],

и затем внутри вашего компонента просто объявите переменную с именем Caman следующим образом:

declare var Caman: any;

Вы не нужно сделать

import * as Caman from 'path-to-caman'

, так как ваш компилятор выдаст ошибку о том, что:

Не удается найти модуль 'caman'.

Простое добавление скрипта в массив scripts в .angular-cli / angular.json (в случае Angular 6) добавит его в глобальную область видимости, и вы сможете получить к нему доступ из ваших компонентов.

Кроме того, убедитесь, что вы вызываете любую функцию в нем внутри ngAfterViewInit метода ловушки жизненного цикла, так как он пытается получить доступ к элементам DOM по id.

Answer 2

• Сначала сделайте как Как я могу использовать foxTooltip с Angular?

• Затем добавьте Caman.pack.js из узловых модулей _ в папке caman в активы

• Убедитесь, что ваша объявленная переменная в начале компонента имеет то же имя, что и в пакете "Caman", с учетом регистра