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 ponent, 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 ponent?

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 ponent but it does not load with any functionality.

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 ponent, 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 ponent?

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 ponent but it does not load with any functionality.

• javascript
• jquery
• angular
• angular-ui-router

• You need to clarify if this is an Angularjs issue (less than version 2), or an Angular issue and remove the other tag as they are very different things. Also, please include the relevant code so we can see exactly what you're working with and what you've tried and it will be easier for someone to help. – Stephen R. Smith Commented May 30, 2019 at 23:45
• Angular 7. Sorry, not able to share the code as it is sensitive information. Its a very simple question, maybe I was too verbose. I have a custom jquery script located in src/assets named "custom.js". Some functions on this file are needed for certain ponents to work. The custom.js file loads when I reload the page I'm currently on, however, when I click on a link in my navbar to route me to another ponent, the custom.js file does not work/get loaded. Not sure why this question was down-voted. – ghostagent151 Commented May 30, 2019 at 23:57
• Maybe consider creating a service to monitor the file or subscribing to some observable that ensures when the page changes that the file continues to load asynchronously? If it stops when you change pages then the object or whatever you are running in that file is no longer being called and if you want the file to continue to be called regardless of the page it is on then subscribe to a custom observable which calls the file once and continues to function until it pletes ( or never if thats your intent) – TimLayne Commented May 31, 2019 at 0:09

4 Answers 4

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 ponent's life cycle handler like ngAfterInit or you can create a universal route handler that invokes it each route change.

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();
});

include the js code inside the function then declare that with that ponent 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 ponent.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 ponent like this:

 partnerSlider();

this will works

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 ponent/page script loads again and for this

You can do

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