Include External Javascript files in HTML - Angular 2

Question

I'm trying to use metronic theme with Angular 2.

Theme has some global stylesheets and Javascripts files which is required for all HTML pages. So, I included all those in my index.html.

But each page has some extra Stylesheets/Javascript files that are specific to that particular HTML page, and is required to render properly.

Angular 2 has concept of components. So, for example, HTML of login page is rendered via a LoginComponent which has styleURL, where i can specify Stylesheets required for login page. But how to specify scripts for that particular page?

I tried using this method, but it didn't do anything.

Answer 1

There are different ways to load external files depending on what you want to do. If you want to split up your html then you should probably consider breaking it up into different components, even presentational (dumb) components nested inside of container components. In that case you would just include an html tag with a child component selector in the html file of the container component. This will also break your typescript component code into smaller files since each is tied to its corresponding component. If you just want to move some logic out of your components then you could consider exposing some helper function(s) of an Angular service, and then using that service in your components via dependency injection.

Answer 2

try below code

 declare var $: any
  ngOnInit() 
     {
        $.getScript('yourfilepath.js');
     }