Использование сторонних модулей AMD в приложении Angular 9 - PullRequest
Новая
       83

Использование сторонних модулей AMD в приложении Angular 9

0 голосов
/ 30 апреля 2020

Я пытаюсь интегрировать XText в веб-редактор Ace в мое приложение Angular 9.

Согласно Документация XText - для использования на клиенте требуется несколько модулей AMD side.

Как я вижу - его можно легко загрузить с помощью require JS: 

require.config({
    paths: {
        "jquery": "webjars/jquery/<version>/jquery.min",
        "ace/ext/language_tools": "webjars/ace/<version>/src/ext-language_tools",
        "xtext/xtext-ace": "xtext/<version>/xtext-ace"
    }
});
require(["webjars/ace/<version>/src/ace"], function() {
    require(["xtext/xtext-ace"], function(xtext) {
        xtext.createEditor();
    });
});

Я установил ace из NPM и скопировал собственно JS файла из xtext soruces в папку с активами.

И в этот момент я немного запутался, как заставить вещи работать вместе.

Я пытался импортировать модули, как описано здесь , но модуль 'xtext / xtext-ace' не работает таким образом из-за отсутствующих зависимостей, которые определены в модуле ace. Когда я пытаюсь импортировать ace js file - консоль заполняется ошибками об отсутствующих зависимостях (которые на самом деле определены сами по себе) 

ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../lib/lang' 
ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../lib/oop' 
ERROR in ./src/assets/scripts/ace.js
Module not found: Error: Can't resolve '../../range'

Как мне импортировать эти модули, чтобы сделать они работают должным образом в Angular файлах с машинными текстами компонентов?

UPD: Загружены простые angular приложения, например, в github .

Я добавил оба модуля js файлы в папку './src/assets/scripts' и пытался получить к нему доступ в app.component.ts

Когда я попытался импортировать его с помощью или потребовать js в index.html это работало, но мне нужно, чтобы оно работало в моих файлах component.ts и запуталось, как повторить этот импорт в них.

...