CODEWITHSUNDEEP
javascriptnode.jsangulartypescriptecmascript-6
Madhur Maurya
Madhur Maurya

Reputation: 1070

Import and use external JS Library in Angular

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.

enter image description here

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.

Upvotes: 0

Views: 1630

Answers (2)

sibabrat swain
sibabrat swain

Reputation: 1368

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

Upvotes: 1

Tony
Tony

Reputation: 20162

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

Upvotes: 0

Related Questions