javascript - 在 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 设计器库中，但 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);
}