Angular CLI: __WEBPACK_IMPORTED_MODULE_1_jquery __ (...). Collapse is not a function

Question

I have an Angular App component generated through the CLI (Angular 4).

I cited jQuery + Bootstrap like this:

  "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"
  ],

My application component looks like this:

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');
    });
  }
}

Getting the following error:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function

Is Bootstrap imported correctly? I tried to add the following to the beginning of my component:

import 'bootstrap/dist/js/bootstrap.js';

EDIT:

One thing I noticed. When launched in the browser, if I execute the following line through the Chrome console, it works without problems:

$('.navbar-collapse').collapse('hide');

What is the difference? Something is missing for me.

Answer 1

, , Bootstrap , jquery . : -

2 fullcalender Angular jquery not found

, -loud answer

Answer 2

.

bootstrap jQuery npm/, , import * as $ from 'jquery';, - . scripts.

scripts script script index.html, . .

collapse jquery bootstrap, -

interface JQuery {
  collapse(options?: any): any;
}

typescript .

# 1

@types/bootstrap, .

Answer 3

You can use jquery like:

    import $ from 'jquery/dist/jquery';