angular4 how to call a function in a external js
Solution 1
Importing your file like this <script src="x.js"></script>
will not work.
You have to import it in the following way:
import * as xJS from './x.js';
If it will not work, the alternative way is to use System.import
:
declare var System: any;
System.import('./x.js')
.then(xJS => {
xJS.open();
});
You can check the following SO post.
Solution 2
You have to declare the name of the function you want to use in your angular component, as-
declare var open: any;
This basically tells the compiler that open
exists somewhere, which will be then found in your js
file.
Also, to use the above method in your component, you will have to use this syntax-
anyCustomMethodName/anyLifeCycleMethod() {
new open();
}
Solution 3
You should first import it like this:
import * as xJS from 'xJS';
Solution 4
If your x.js file is not on your local machine or hosted on CDN or it is third-party library then you can't import it in above ways. Even System.import is deprecated.
You can add your js file into index.html and call its functions using window global object as we do earlier.
Florence
Updated on June 09, 2022Comments
-
Florence almost 2 years
I have a jscript which displays a log to the console:
x.js contains
function open() { console.log('this a function'); }
in index.html of my app
<script src="x.js"></script>
in my component
declare var xJS : any;; @Component({ selector: 'employerfile', templateUrl: './employerfile.component.html' }) export class EmployerFileComponent ..... openURL() { xJS.open(); } }
in html
<a (click)="openURL()"> click </a>
When I execute this code, I get an exception@
Original exception: xJS is not defined
How can I call this external function?
-
Florence almost 7 yearsI have this compile error ERROR in C:/....app.component.ts (15,28): File 'C:/....js/x.js' is not a module.
-
Florence almost 7 yearsi have this error error_handler.js:50 EXCEPTION: Uncaught (in promise): TypeError: xJS.open is not a function
-
Hristo Eftimov almost 7 yearsCan you make your external file as a module and to export your function:
export default function open(){ .... }
-
Rich over 6 yearswhat if you want to store the return value from the open() function?
-
Ghizlane Lotfi almost 6 yearsI have the same issue, but the difference is the js I am including, is in the website and not local
https://chggtt.gt/Critgtek/cfr.cerfritek.js
so any solution for this ? -
Hristo Eftimov almost 6 years@GhizlaneLotfi I have never faced with an issue with an external link. Maybe this post can help you stackoverflow.com/q/34607252/2765346 Good luck :)
-
Vladimir Despotovic over 5 yearsWhen I tried your answer, I got "Modifiers can'tappear here" error.
-
Vladimir Despotovic over 5 yearsWhat worked for me is I put let open: any; and then ignore the lintrule to put const , instead of let. Keep it as let. Without the 'declare' word.