title: Angular4: jQuery and angular2-materialize not working after route navigation
body: <p>Have created an angular 4 project with angular-cli. imported css and js in angular-cli.json file.</p>
  
  <pre><code>"styles": [
      "../node_modules/materialize-css/dist/css/materialize.css",
      "styles.css"
  ],
  "scripts": [
      "../node_modules/jquery/dist/jquery.js",
      "../node_modules/hammerjs/hammer.js",
      "../node_modules/materialize-css/dist/js/materialize.js",
      "../src/assets/js/init.js"
  ],
  </code></pre>
  
  <p>init.js has below functions</p>
  
  <pre><code>(function($) {
      $(function() {
          $('.slider').slider();
          $('.button-collapse').sideNav();
          $('.carousel').carousel();
          // $('.carousel.carousel-slider').carousel({fullWidth: true});
          $('.carousel').carousel({
              dist: 0,
              shift: 0,
              padding: 20,
          });
  
      }); // end of document ready
  })(jQuery);
  </code></pre>
  
  <p>imported MaterializeModule  in app.module.ts
  import { MaterializeModule } from 'angular2-materialize';</p>
  
  <p>Slider works as expected when we land page first time or when we refresh. </p>
  
  <p>Problem: when we navigate using router-link then page navigates correctly but javascript functions are not getting called.</p>
  
  <p>routing from home page <code>&lt;a routerLink="/blog/abc-1"&gt;Blog&lt;/a&gt;</code></p>
  
  <p>I tried: `    blog.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MaterializeModule } from 'angular2-materialize';
  
  import * as $ from 'jquery';
  
  import * as Materialize from 'materialize-css';
  
  
  declare let Materialize : any;
  
  @Component({
    selector: 'app-blog',
    templateUrl: './blog.component.html',
    styleUrls: ['./blog.component.css']
  })
  export class BlogComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
      Materialize('.slider').slider();
    }
  
  }
  </code></pre>
  
  <p>`
  Error:
  getting error :
  ERROR TypeError: a.addEventListener is not a function</p>
  
  <pre><code>at http://localhost:4200/vendor.bundle.js:15611:765
  at Array.forEach (native)
  </code></pre>