在 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      },