Call a function of external js file in angular 5 component

Question

Under index.html I have delcared an external js file like
<script data-siteid="XXXXXX" src="https://api.cartstack.com/js/customer-tracking/website.com_c7ee604471301b0bd028e8f19a535557.js" type="text/javascript"> </script>

I have to call a function named cartstack_updatecart() from a component. (That function is generating from above link). How to do that?

Abhishek Sharma · Accepted Answer · 2018-07-13 13:36:04Z

6

Follow below steps in your component:-

1) First add a reference of your external JS file for importing it to the component. 
   Import * as abcJS from '/YourExternalJS.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var cartstack_updatecart: any;

3) ngOninit(){
 cartstack_updatecart();
 }

4) Do remember that your JQuery should be loaded first than your external JS file.

I have called that function on ngoninit lifecycleHook. Also instead of declaring external JS file inside Index.html, I would rather suggest you to declare it in angular-cli.json file in scripts array. All the best.

edited Jul 13, 2018 at 13:36

answered Jul 13, 2018 at 13:25

Abhishek Sharma

3601 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhishek Sharma Over a year ago

@Dipankar Naskar Have you got the solution or you still facing issues? Please let me know, I can share the code in more detail.

Dipankar Naskar Over a year ago

yeah I have tried your suggestion. and it's working. Thanks man.

Kerim092 Over a year ago

Just quick note for me it worked without first step.. That just gave me error '../../yourExternalJS.js' is not a module (it worked but the error was in the bash).. and import in angular-cli.json was also required. So in my case, skip first step and add another step which is add script in angular-cli.json scripts..

Abhishek Sharma Over a year ago

Yes scripts can be included either via adding them to angular-cli.json or dropping their reference straight forward to Index.html. I would also like to notify here that in angular 6, we don't have angular-cli.json. CLI projects in angular 6 onwards will be using angular.json instead of .angular-cli.json for build and project configuration.

Jagdeesh Kumar Over a year ago

Hi @AbhishekSharma, in my case JS file is deployed on another server. How can I achieve the same thing?

|

Collectives™ on Stack Overflow

Call a function of external js file in angular 5 component

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related