Injected CDN script is not executing again on updating src="URL" in Angular

Nikunj Mochi 0
Viewed 28

I'm injecting a style and a script from a third party CDN in angular application using DOM manipulation.

<link id="mystyles" href="https://www.cdndomain.com/{language}/style.css">
<script id="myscript" src="https://www.cdndomain.com/{language}/app.js"></script>

It executes perfectly for the first time without any trouble. But, my website is multilingual. So, on language change I'm grabbing the link and script tags with their IDs. Then I tried to modify the "language" parameter from let's say "EN" to "FR" with below 2 approaches and none of them is working:

I grabbed ID's of link and script tag and modified it's "href" and "src" respectively.

Result: "href and src is getting updated, But link and script is not executing from the new href and new src respectively. It was not even downloading new script from CDN."

I grabbed ID's of link and script tag and removed these elements from DOM and injected both link and script elements with DOM manipulation.

Result: "Same as above new script is not executing, but this time it downloaded script from updated CDN src."

NOTE: "CDN is Google CDN and Both approaches are working if I first modify the URL and the refresh the page either manually or by using 'window.location.relaod()'. So, in this case new updated script gets execute."

Can you please help me to solve the problem, as script is not executing on updating it's src.

Thanks in advanced.

cdn browser javascript angular html
1 Answers

It is working, do you inspect it? It does changed, but maybe you're thinking, "hm why this modifed script is not downloaded?". Well because of the script tag is already rendered and already downloaded, so you can't do that. What you can do though add NEW script tag.

Maybe this will help How to dynamically change the script src?. This links would explain more why your code "does not work".

Romario Putra0
Related