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() {
  public loadJsFile(url) {
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';

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,

By Rijwan Ansari

MVP, CSM, CSPO, MCP, MCTS. Sr. Software Developer. Expertise in ASP.NET MVC, Angular, AngularJs, .Net Core, C#.NET, Azure, Cognitive Services, Machine Learning, SharePoint, Azure Services, and tools, Requirement Analysis, Team Management, Pre-Sales and more. Ability to work independently and Team, handle pressure and meet commitment. Excellence Communication and adjust in any environment

Leave a Reply

Your email address will not be published. Required fields are marked *