在Angular中導入和使用外部JS庫

Question

我有一個外部庫（Grapecity 的 web-designer.js），它在普通的 HTML 應用程序上運行良好。 我想使用這個庫，因為它在我的 Angular 組件之一中。 我添加了對這個庫的引用，但是在 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' 在 web-designer 庫中，但 Angular 無法找到它。

在 JS 庫中導出模塊似乎存在一些問題。 我可以以同樣的方式引用 jQuery 但不是 web-designer.js。

我想修改 JS 庫以便能夠直接使用它（因為它在普通的 HTML 應用程序上運行良好）。 該文件（在上面的鏈接中給出）又大又小，我無法修改它以滿足我的需要。

如果有人遇到類似問題，請尋找解決方案。

Answer 1

為什么不像這樣在 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
      },

Answer 2

我遇到了類似的問題並以這種方式解決了它。 看看它可能對你有幫助。 我在.ts文件中以這種方式使用了DragonSpeech檢測cdn並且工作正常。

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 3

我們正在聯系我們的開發團隊，看看他們能否為您提供解決方案。

謝謝，

葡萄城支持團隊