title: Angular CLI: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function
body: <p>I have an Angular App Component generated via the CLI (Angular 4).</p>
  
  <p>I've brought in jQuery + Bootstrap like so:</p>
  
  <pre><code>  "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.css"
    ],
    "scripts": ["../node_modules/jquery/dist/jquery.min.js",
                "../node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],
  </code></pre>
  
  <p>My App Component looks like so:</p>
  
  <pre><code>import { Component, AfterViewInit } from '@angular/core';
  import * as $ from 'jquery';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [
  
      './app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    title = 'app';
  
    constructor() { }
  
    ngAfterViewInit() {
  
      $('.nav a').click(function () {
          $('.navbar-collapse').collapse('hide');
      });
    }
  }
  </code></pre>
  
  <p>Receiving the following error:</p>
  
  <pre><code>ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function
  </code></pre>
  
  <p>Is Bootstrap not being imported properly? I've tried adding the following to the top of my component:</p>
  
  <pre><code>import 'bootstrap/dist/js/bootstrap.js';
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>One thing I've noticed. When running in the browser if I execute the following line through the Chrome Console it works without issue:</p>
  
  <pre><code>$('.navbar-collapse').collapse('hide');
  </code></pre>
  
  <p>What would be the difference here? I must be missing something.</p>