How to load a script for a specific route in angular 4

Question

I have to load a script that calculates the analytics on a specific route in angular 4. But for other routes the script should not get loaded.

I tried adding the script in index.html but the script will be loaded for all the routes. Any workaround for this?

below is the script

(function(a,b,c,d,e,f){
    a.hj=a.hj||function(){(a.hj.q=a.hj.q||[]).push(arguments)};
    a._hjSettings={hjid:xx,hjsv:xxx};
    e=b.getElementsByTagName('head')[0];
    f=b.createElement('script');f.async=1;
    f.src=t+a._hjSettings.hjid+d+a._hjSettings.hjsv;
    e.appendChild(f);
})(window,document,'https://xx.xx.com/c/xx-','.js?sv=');

score 1 · Accepted Answer · answered Nov 01 '19 at 09:47

If you add it in index.html then the script will be loaded in all components, and this is not your need. So you can try loading the script from the ts file of the component in which you want to load the script. So in the ts file, you can do it as follow.

System.import('https://xx.xx.com/c/xx-','.js?sv='); //or below one
require('https://xx.xx.com/c/xx-','.js?sv=');

Reference: https://stackoverflow.com/a/41402204/10971575

How to load a script for a specific route in angular 4

1 Answers1