在 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”位于网页设计器库中，但 Angular 无法找到它。导出 JS 库中的模块似乎存在一些问题。我可以用同样的方式引用 jQuery，但不能引用 web-designer.js。我想修改 JS 库，以便我能够直接使用它（因为它在纯 HTML 应用程序上运行良好）。该文件（在上面的链接中给出）很大且缩小了，我无法修改它以满足我的需要。如果有人遇到类似问题，请寻找解决方案。

Answer 1

我遇到了类似的问题并以这种方式解决了它。看看它可能对你有帮助。我在 .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 2

你为什么不像这样在 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

      },