How to run third party JS script in Angular 6

Question

I have some third party JS scripts in angular app which has $(document).ready functions, At start everything works fine but when I change the routes via routerLink then some functionality does not work but when page is reloaded then it works.

I have tried importing JS files in angular.json and index.html.

Please help if you have any solution for this problem.

Thanks.

You shouldn't use $(document).ready in your library but, in another way, in your app made in Angular -> Angular use its virtual DOM, putting some code between the real DOM and the Angular's one could cause a lot of errors, maybe this is your case. You shoul put your logic executed into the $(document).ready into some angular life-cycle. — Jacopo Sciampi
– Jacopo Sciampi, Commented Dec 14, 2018 at 10:50
I have some custom JS file which uses document.ready function is there any change I can do in custom js file ? — Parvez
– Parvez, Commented Dec 14, 2018 at 10:52

Danilo Torchio · Accepted Answer · 2018-12-14 11:16:29Z

1

This happens because the page is fully loaded once and then only portions of the page are re-loaded when you navigate on your routes (SPA). So, the $(document).ready event is fired only once, when the page is loaded.

An workaround to achieve this is fire your third party script on your own in some angular life-cycle, for example, angular router NavigationEnd event:

this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
     // do your stuff here
  }
});

But this is bad, it's easy to lost control. This could be better if you encapsulate the third party library in some Angular component, e.g. a directive, to avoid $(document).ready pattern.

answered Dec 14, 2018 at 11:16

Danilo Torchio

4013 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

How to run third party JS script in Angular 6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related