Импорт и использование внешней библиотеки JS в Angular

Question

У меня есть внешняя библиотека (web-designer.js от Grapecity), которая отлично работает на простом HTML-приложении. Я хочу использовать эту библиотеку, как она есть в одном из моих угловых компонентов. Я добавил ссылку на эту библиотеку, но я получаю ошибки при импорте файла в Angular.

Вот как я ссылаюсь на библиотеку (jQuery является зависимостью):

    import '../app/lib/scripts/jquery';
    import '../app/lib/scripts/web-designer';

Ссылка cdn для библиотеки: http://cdn.grapecity.com/ActiveReports/AR13/webdesignerresourcefiles/web-designer.js

Это ошибки, которые яполучить при загрузке приложения Angular. Обратите внимание, что я получаю те же ошибки, когда использую require вместо import. Зависимости 'Barcode' и 'dv' находятся в библиотеке веб-дизайнера, но Angular не может их найти.

Кажется, существует некоторая проблема при экспорте модулей в библиотеке JS. Я могу ссылаться на jQuery таким же образом, но не на web-designer.js.

Я хочу изменить библиотеку JS, чтобы я мог использовать ее напрямую (так как она отлично работает в простом приложении HTML). Файл (указанный в ссылке выше) большой и уменьшенный, и я не могу изменить его в соответствии со своими потребностями

Поиск решений, если кто-либо сталкивался с подобной проблемой.

Answer 1

Я столкнулся с подобной проблемой и решил ее таким образом. Посмотрите, это может вам помочь. Таким образом я использовал обнаружение CDS DragonSpeech в файле .ts и работает нормально.

initiateDragonSpeechToText() {
    const fileref = document.createElement('script');
    fileref.setAttribute('type', 'text/javascript');
    fileref.setAttribute('src',
        'https://speechanywhere.nuancehdp.com/3.0/scripts/Nuance.SpeechAnywhere.js?_r=' +
        (Math.random() * Math.pow(10, 18)).toString(32));
    document.getElementsByTagName('head')[0].appendChild(fileref);

    const inlineFunc = document.createElement('script');
    inlineFunc.setAttribute('type', 'text/javascript');
    const userID = this.UserDetails ? this.UserDetails.UserName : '';
    inlineFunc.appendChild(document.createTextNode('function NUSA_configure() {NUSA_userId = "' + userID + '";NUSA_applicationName = "Artisan";NUSA_enableAll = false;}'));
    document.getElementsByTagName('head')[0].appendChild(inlineFunc);
}

Answer 2

Мы обращаемся к нашей команде разработчиков, чтобы узнать, смогут ли они предоставить вам решение.

Спасибо,

Служба поддержки GrapeCity

Answer 3

Почему бы вам просто не импортировать внешнюю библиотеку в angular.json вот так?

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/testssss",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss"
        ],
        "scripts": [] // add to script section here
      },