在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

我们正在联系我们的开发团队，看看他们能否为您提供解决方案。

谢谢，

葡萄城支持团队