Reputation: 1070
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.
Upvotes: 0
Views: 1630
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
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