External Js File is not working in Angular
I found that sometimes, some external js will not work or load correctly in angular solution specially while designing theme. Specifically, I have found that some external js having functions are not working or loading because which the theme was not functioning as per expectation. In my case, I was using Admin LTE bootstrap theme, likewise I faced similar issue with some another themes as well.
After doing some research and hit and trial, I found a solution that we can load it through a typescript file.
In my case, I loaded the js file through a common component as depicted below:
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() {
this.loadJsFile("assets/adminlte/dist/js/demo.js");
}
public loadJsFile(url) {
let node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
Description: Above, I created a function to load js file in head of the DOM and initiated that funtion in ngOnInit().
Alternatively, We can load the file in module/component level as well.
Kind Regards,