在Angular中导入和使用外部JS库 [英] Import and use external JS Library in Angular

问题描述

我有一个外部库(Grapecity的web-designer.js)，可以在纯HTML应用程序上很好地运行.我想使用这个库，因为它在我的Angular组件之一中.我已经添加了对该库的引用，但是在Angular中导入文件时出现错误.

这是我引用库的方式(jQuery是一个依赖项):

  import'../app/lib/scripts/jquery';导入'../app/lib/scripts/web-designer'; 

库的cdn链接为

在JS库中导出模块时似乎存在一些问题.我能够以相同的方式引用jQuery，但不能引用web-designer.js.

我想修改JS库，以便能够直接使用它(因为它在纯HTML应用程序上可以正常工作).该文件(在上面的链接中提供)很大且很小，因此我无法对其进行修改以满足我的需要.

正在寻找解决方案，如果有人遇到过类似的问题.

解决方案

我也遇到了类似的问题，并以这种方式解决了.看看它可能对您有帮助.我以这种方式在.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);} 

I have an external library (web-designer.js by Grapecity) which runs fine on plain HTML application. I want to use this library as it is in one of my Angular Components. I have added reference to this library, but I get errors while importing the file in Angular.

This is how I reference the library (jQuery is a dependency):

    import '../app/lib/scripts/jquery';
    import '../app/lib/scripts/web-designer';

The cdn link for library is http://cdn.grapecity.com/ActiveReports/AR13/webdesignerresourcefiles/web-designer.js

These are the errors that I get while loading Angular application. Please note that I get same errors when I use require instead of import. The dependencies 'Barcode' and 'dv' are within web-designer library but Angular is unable to find it.

There seems some issue in exporting the modules in the JS library. I am able to refer jQuery in the same way but not web-designer.js.

I want to modify the JS library so that I am able to consume it directly (as it works fine on plain HTML application). The file (given in link above) is large and minified and I am unable to modify it to suit my needs.

Looking for solutions if anyone has faced similar issue.

解决方案

I have faced a similar issue and resolved it in this way. Have a look it may help you. I used DragonSpeech detection cdn in this way in the .ts file and works fine.

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);
}

这篇关于在Angular中导入和使用外部JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！