As a newcomer to Typescript, I've been experimenting with some code I came across online to enhance the appearance of links on my website.
<script src="https://wow.zamimg.com/widgets/power.js"></script>
<script>var wowhead_tooltips = {
"colorlinks": true,
"iconizelinks": true,
"renamelinks": true
};
</script>
After adding this code snippet to my index.html file, everything was working smoothly until I loaded a component. Upon further investigation, I discovered that I needed to call $WowheadPower.refreshLinks();
To have the links update when new elements are added, I wasn't sure how to declare the variable in Typescript and connect it to various Angular commands, unless making use of a try catch block:
loadScript(){
try{
// Update tooltips
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
}
I encountered an error stating Cannot find name '$WowheadPower' However, despite this error, the functionality on my page is as desired.
Although it functions perfectly, the persistent error led me to explicitly declare the variable
try{
// Update tooltips
var $WowheadPower
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
This change caused the script to break, presumably because I unintentionally overwrote the correct variable holding the necessary method.
Currently, I am stuck leaving the error in place for the functionality to work properly, although it prevents successful compilation during 'ng serve'. Only by saving the project in VS Code does it revert back to functioning correctly.
Any advice on how to tackle this issue?