title: Add .js scripts in Angular 2 project
body: <p>I am building a web app with Angular 2 framework and I want to use an external template (<a href="https://freehtml5.co/preview/?item=splash-free-html5-bootstrap-template-for-any-websites" rel="nofollow noreferrer">https://freehtml5.co/preview/?item=splash-free-html5-bootstrap-template-for-any-websites</a>).</p>
  
  <p>I need to run some scripts (jquery.min.js, bootstrap.js, ...) in my components template but if I put it into scripts tag don't work.</p>
  
  <p>If I run scripts tag in index.html it works but when I browse to another page script are not reloaded.</p>
  
  <p>How can I load the scripts without script tag in template??</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Angular2App&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  
    &lt;!-- Facebook and Twitter integration --&gt;
    &lt;meta property="og:title" content="" /&gt;
    &lt;meta property="og:image" content="" /&gt;
    &lt;meta property="og:url" content="" /&gt;
    &lt;meta property="og:site_name" content="" /&gt;
    &lt;meta property="og:description" content="" /&gt;
    &lt;meta name="twitter:title" content="" /&gt;
    &lt;meta name="twitter:image" content="" /&gt;
    &lt;meta name="twitter:url" content="" /&gt;
    &lt;meta name="twitter:card" content="" /&gt;
  
    &lt;!--&lt;link href="build/main.css" rel="stylesheet"&gt;--&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"&gt;
  
    &lt;!-- Animate.css --&gt;
    &lt;link rel="stylesheet" href="assets/css/animate.css"&gt;
    &lt;!-- Icomoon Icon Fonts--&gt;
    &lt;link rel="stylesheet" href="assets/css/icomoon.css"&gt;
    &lt;!-- Themify Icons--&gt;
    &lt;link rel="stylesheet" href="assets/css/themify-icons.css"&gt;
    &lt;!-- Bootstrap  --&gt;
    &lt;link rel="stylesheet" href="assets/css/bootstrap.css"&gt;
  
    &lt;!-- Magnific Popup --&gt;
    &lt;link rel="stylesheet" href="assets/css/magnific-popup.css"&gt;
  
    &lt;!-- Owl Carousel  --&gt;
    &lt;link rel="stylesheet" href="assets/css/owl.carousel.min.css"&gt;
    &lt;link rel="stylesheet" href="assets/css/owl.theme.default.min.css"&gt;
  
    &lt;!-- Theme style  --&gt;
    &lt;link rel="stylesheet" href="assets/css/style.css"&gt;
  
  
    // SCRIPTS THAT I NEED TO LOAD
    &lt;!-- Modernizr JS --&gt;
    &lt;script src="assets/js/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
    &lt;!-- FOR IE9 below --&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="assets/js/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;!-- jQuery --&gt;
    &lt;script src="assets/js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- jQuery Easing --&gt;
    &lt;script src="assets/js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap --&gt;
    &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- Waypoints --&gt;
    &lt;script src="assets/js/jquery.waypoints.min.js"&gt;&lt;/script&gt;
    &lt;!-- Carousel --&gt;
    &lt;script src="assets/js/owl.carousel.min.js"&gt;&lt;/script&gt;
    &lt;!-- countTo --&gt;
    &lt;script src="assets/js/jquery.countTo.js"&gt;&lt;/script&gt;
    &lt;!-- Magnific Popup --&gt;
    &lt;script src="assets/js/jquery.magnific-popup.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/js/magnific-popup-options.js"&gt;&lt;/script&gt;
    &lt;!-- Main --&gt;
    &lt;script src="assets/js/main.js"&gt;&lt;/script&gt;
    // SCRIPTS THAT I NEED TO LOAD
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { routing } from './app.routing.module';
  
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      LoginComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      routing
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>app.routing.module.ts</p>
  
  <pre><code>import { Routes, RouterModule } from '@angular/router';
  import { HomeComponent } from './home/home.component';
  import { LoginComponent } from './login/login.component';
  
  const routes: Routes = [
      {
          path: 'login',
          component: LoginComponent
      },
      {
          path: 'home',
          component: HomeComponent
      },
      {
          path: '',
          component: LoginComponent
      },
      {
          path: '**',
          component: LoginComponent
      }
  ];
  
  export const routing = RouterModule.forRoot(routes);
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
  }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>