Import and use external JS Library in Angular

Question

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.

that seems like a pretty heavy on the DOM library (a spreadsheet?). Generally, integrating vanilla JS libraries that modify the DOM isn't recommended because they interfere with Angular's DOM manipulation. — ulmas
– ulmas, Commented Oct 18, 2019 at 21:43
having said that, perhaps you can include the library in the index.html file, depending on what your goal is. but then you won't necessarily be able to interact with that library through Angular. — ulmas
– ulmas, Commented Oct 18, 2019 at 21:44
Thanks samlu. Did you have a look at js file. Sadly I cannot load the file in script tag in index.html. My SPA has a limitation and it ignores script tags altogether. I am using a wrapper written on top of Angular. — Madhur Maurya
– Madhur Maurya, Commented Oct 19, 2019 at 3:27

sibabrat swain · Accepted Answer · 2019-10-19 11:39:58Z

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

Tony · Accepted Answer · 2019-10-19 11:05:17Z

0

Why dont you just import external lib in angular.json like this ?

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

answered Oct 19, 2019 at 11:05

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Collectives™ on Stack Overflow

Import and use external JS Library in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related