External scripts do not load after routing to another component in Angular application

Question

I have a navbar on my Angular 7 application. I also have a custom javascript file that loads when the app initially load. After clicking on a link in my application to route to another component, the external javascript file stops working/does not load. How can I get this javascript file to load or remain loaded when I click on a link to route to a different component?

I have added the javascript file to my angular.json file correctly, the problem still persists. I have tried loading the script inside of my index.html file inside a script tag, that also does not solve my problem.

I've read through some older stackoverflow threads regarding the same problem but there doesn't seem to be a definitive answer or solution.

I expect my custom js file to load with all of its functionality after clicking on a link in my navbar to that routes me to another component but it does not load with any functionality.

Answer 1

When you change routes you are not loading a new page, you are replacing parts of the DOM of the same page. It is not going to reinvoke a JS file loaded on initial page load. If you want to run some JS on route change you can call it in a component's life cycle handler like ngAfterInit or you can create a universal route handler that invokes it each route change.

Answer 2

you can try this

public loadScript() {
  const node = document.createElement('script');
  node.src = 'assets/new/js/script.js'; // put there your js file location
  node.type = 'text/javascript';
  node.async = true;
  node.charset = 'utf-8';
 document.getElementsByTagName('head')[0].appendChild(node);

}

and it run in your Component class NgOnit() like this

new Promise(resolve => {
  this.loadScript();
});

Answer 3

include the js code inside the function then declare that with that component that will be affected from external js like this in your js file the code is this:

 function partnerSlider()
 {
$('.customer-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
        breakpoint: 768,
        settings: {
            slidesToShow: 4
        }
    }, {
        breakpoint: 520,
        settings: {
            slidesToShow: 3
        }
    }]
    });
 }

in your component.ts js file like this:

   import '../../assets/js/partner.js';

then declare that function like this:

   declare const partnerSlider:any;

then call this functin inside the lifecycle method of the component like this:

 partnerSlider();

this will works

Answer 4

I got this problem, for me, onScriptLoad was not working when I navigated this page. So I achieved through this

let script = document.createElement('script');
script.setAttribute("id", "googleButtonScript");
script.type = 'text/javascript';
script.src = "Your script link";   
document.getElementsByTagName('head')[0].appendChild(script);

Problem: Every time you navigate to this component/page script loads again and for this

You can do

let elScript = document.getElementById("googleButtonScript")
if (elScript){ elScript.remove() }