title: External js files are not working inside angular 2 components
body: <p>I'm working with altair admin template. Trying to convert it into an angular2 spa.<br>
  I am using mgechev's angular-seed package.<br>
  <a href="https://github.com/mgechev/angular-seed" rel="nofollow">mgechev's angular-seed</a><br><br></p>
  
  <p>My file structure.
  <a href="https://s17.postimg.org/nn1oza8bz/image.jpg" rel="nofollow">Click here to view image</a></p>
  
  <p>Here is my index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html  lang="en" class="app_theme_g"&gt;
  &lt;head&gt;
    &lt;base href="&lt;%= APP_BASE %&gt;"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;!-- Remove Tap Highlight on Windows Phone IE --&gt;
    &lt;meta name="msapplication-tap-highlight" content="no"/&gt;
  
    &lt;link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-16x16.png" sizes="16x16"&gt;
    &lt;link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-32x32.png" sizes="32x32"&gt;
  
    &lt;!--Title--&gt;
    &lt;title&gt;Resurgent&lt;/title&gt;
  
    &lt;!-- uikit --&gt;
    &lt;link rel="stylesheet" href="assets/admin/uikit/css/uikit.almost-flat.min.css" media="all"&gt;
    &lt;!--Login page--&gt;
    &lt;link rel="stylesheet" href="assets/admin/css/login_page.min.css" /&gt;
    &lt;!-- flag icons --&gt;
    &lt;link rel="stylesheet" href="assets/admin/icons/flags/flags.min.css" media="all"&gt;
    &lt;!-- style switcher --&gt;
    &lt;link rel="stylesheet" href="assets/admin/css/style_switcher.min.css" media="all"&gt;
    &lt;!-- altair admin --&gt;
    &lt;link rel="stylesheet" href="assets/admin/css/main.min.css" media="all"&gt;
    &lt;!-- themes --&gt;
    &lt;link rel="stylesheet" href="assets/admin/css/themes/themes_combined.min.css" media="all"&gt;
    &lt;!-- matchMedia polyfill for testing media queries in JS --&gt;
    &lt;!--[if lte IE 9]&gt;
    &lt;script type="text/javascript" src="assets/admin/matchMedia/matchMedia.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="assets/admin/matchMedia/matchMedia.addListener.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="assets/admin/css/ie.css" media="all"&gt;
    &lt;![endif]--&gt;
  
    &lt;!--Loading Animation--&gt;
    &lt;link rel="stylesheet" href="assets/loader.css"&gt;
  
    &lt;!-- inject:css --&gt;
    &lt;!-- endinject --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;app-root&gt;
      &lt;div class="spinner"&gt;
        &lt;div class="rect1"&gt;&lt;/div&gt;
        &lt;div class="rect2"&gt;&lt;/div&gt;
        &lt;div class="rect3"&gt;&lt;/div&gt;
        &lt;div class="rect4"&gt;&lt;/div&gt;
        &lt;div class="rect5"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/app-root&gt;
  
    &lt;!-- google web fonts --&gt;
    &lt;script&gt;
      WebFontConfig = {
        google: {
          families: [
            'Source+Code+Pro:400,700:latin',
            'Roboto:400,300,500,700,400italic:latin'
          ]
        }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    &lt;/script&gt;
  
    &lt;!-- common functions --&gt;
    &lt;script src="assets/admin/js/common.min.js"&gt;&lt;/script&gt;
    &lt;!-- altair login page functions --&gt;
    &lt;script src="assets/admin/js/pages/login.min.js"&gt;&lt;/script&gt;
    &lt;!-- uikit functions --&gt;
    &lt;script src="assets/admin/js/uikit_custom.min.js"&gt;&lt;/script&gt;
    &lt;!-- altair common functions/helpers --&gt;
    &lt;script src="assets/admin/js/altair_admin_common.min.js"&gt;&lt;/script&gt;
  
  
    &lt;!--Seed Project Scripts--&gt;
    &lt;script&gt;
      // Fixes undefined module function in SystemJS bundle
      function module() {}
    &lt;/script&gt;
  
    &lt;!-- shims:js --&gt;
    &lt;!-- endinject --&gt;
  
    &lt;% if (ENV === 'dev') { %&gt;
    &lt;script src="&lt;%= APP_BASE %&gt;app/system-config.js"&gt;&lt;/script&gt;
    &lt;% } %&gt;
  
    &lt;!-- libs:js --&gt;
    &lt;!-- endinject --&gt;
  
    &lt;!-- inject:js --&gt;
    &lt;!-- endinject --&gt;
  
    &lt;% if (ENV === 'dev') { %&gt;
    &lt;script&gt;
    System.import('&lt;%= BOOTSTRAP_MODULE %&gt;')
      .catch(function (e) {
        console.error(e,'Report this error at https://github.com/mgechev/angular2-seed/issues');
      });
    &lt;/script&gt;
    &lt;% } %&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from "@angular/router";
  
  import { AuthComponent } from "./auth.component";
  import { LoginComponent } from "./login/login.component";
  import { SignupComponent } from "./signup/signup.component";
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule
    ],
    declarations: [
      AuthComponent,
      LoginComponent,
      SignupComponent
    ],
    exports: [
      AuthComponent,
      LoginComponent,
      SignupComponent
    ],
    providers: []
  })
  export class AuthModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector: 'auth',
    templateUrl: 'auth.component.html',
    styleUrls: ['auth.component.css'],
  })
  
  export class AuthComponent implements OnInit {
  
    title: string = "hello";
  
    ngOnInit() { }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Auth module:</p>
  
  <p>auth.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from "@angular/router";
  
  import { AuthComponent } from "./auth.component";
  import { LoginComponent } from "./login/login.component";
  import { SignupComponent } from "./signup/signup.component";
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule
    ],
    declarations: [
      AuthComponent,
      LoginComponent,
      SignupComponent
    ],
    exports: [
      AuthComponent,
      LoginComponent,
      SignupComponent
    ],
    providers: []
  })
  export class AuthModule { }</code></pre>
  </div>
  </div>
  </p>
  
  <p>auth.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector: 'auth',
    templateUrl: 'auth.component.html',
    styleUrls: ['auth.component.css'],
  })
  
  export class AuthComponent implements OnInit {
  
    title: string = "hello";
  
    ngOnInit() { }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>login.component.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    moduleId: module.id,
    selector: 'login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css'],
  })
  
  export class LoginComponent implements OnInit {
  
    verticalBlocks: any;
  
    title: string = "Login";
  
    ngOnInit() {}
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>login.component.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="login_page"&gt;
    &lt;div class="login_page_wrapper"&gt;
      &lt;div class="md-card" id="login_card"&gt;
        &lt;div class="md-card-content large-padding" id="login_form"&gt;
          &lt;div class="login_heading"&gt;
            &lt;div class="user_avatar"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;form&gt;
            &lt;div class="uk-form-row"&gt;
              &lt;label for="login_username"&gt;Username&lt;/label&gt;
              &lt;input class="md-input" type="text" id="login_username" name="login_username" /&gt;
            &lt;/div&gt;
            &lt;div class="uk-form-row"&gt;
              &lt;label for="login_password"&gt;Password&lt;/label&gt;
              &lt;input class="md-input" type="password" id="login_password" name="login_username" /&gt;
            &lt;/div&gt;
            &lt;div class="uk-margin-medium-top"&gt;
              &lt;a class="md-btn md-btn-primary md-btn-block md-btn-large"&gt;Sign In&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="uk-margin-top"&gt;
              &lt;a class="uk-float-right"&gt;Need help?&lt;/a&gt;
              &lt;span class="icheck-inline"&gt;
                  &lt;input type="checkbox" name="login_page_stay_signed" id="login_page_stay_signed" data-md-icheck /&gt;
                  &lt;label for="login_page_stay_signed" class="inline-label"&gt;Stay signed in&lt;/label&gt;
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="uk-margin-top uk-text-center"&gt;
        &lt;a [routerLink]="['/signup']"&gt;Create an account&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything is working fine except external js. Javascripts are not working properly. But the css files are working.
  Material components and modals other javascript functionality nothing is working inside angular component file.
  <br></p>