在 Angular 中导入和使用外部 JS 库答案

【问题标题】：Import and use external JS Library in Angular在 Angular 中导入和使用外部 JS 库
【发布时间】：2020-02-15 21:02:45
【问题描述】：

我有一个在纯 HTML 应用程序上运行良好的外部库（Grapecity 的 web-designer.js）。我想使用这个库，因为它在我的一个 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 应用程序上运行良好）。该文件（在上面的链接中给出）又大又小，我无法修改它以满足我的需要。

如果有人遇到类似问题，请寻找解决方案。

【问题讨论】：

这对 DOM 库（电子表格？）来说似乎相当沉重。一般来说，不推荐集成修改 DOM 的 vanilla JS 库，因为它们会干扰 Angular 的 DOM 操作。
话虽如此，也许您可以将库包含在 index.html 文件中，具体取决于您的目标。但是您不一定能够通过 Angular 与该库进行交互。
谢谢萨姆鲁。你有没有看一下js文件。可悲的是，我无法在 index.html 的脚本标记中加载文件。我的 SPA 有一个限制，它完全忽略了脚本标签。我正在使用在 Angular 之上编写的包装器。

标签： javascript node.js angular typescript ecmascript-6

【解决方案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
      },

【讨论】：

【解决方案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);
}

【讨论】：

感谢您的方法帮助很大

【解决方案3】：

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

谢谢，

葡萄城支持团队

【讨论】：