Angular CLI: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function

user_20446 0
Viewed 15738

I have an Angular App Component generated via the CLI (Angular 4).

I've brought in jQuery + Bootstrap like so:

  "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 App Component looks like so:

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

Receiving the following error:

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

Is Bootstrap not being imported properly? I've tried adding the following to the top of my component:

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

EDIT:

One thing I've noticed. When running in the browser if I execute the following line through the Chrome Console it works without issue:

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

What would be the difference here? I must be missing something.

twitter-bootstrap angular jquery
5 Answers

The below step resolved this issue for me..

I replaced the jquery import command in the component from

import * as $ from 'jquery';

to

declare var $ : any;
user_90338340

Follow my steps

1) Install jQuery. (skip if already installed)

npm install jquery --save

2) Install types for jQuery.

npm install @types/jquery --save

3) Import jQuery in app.module.ts.

import * as $ from 'jquery';

4) Install bootstrap 3 not 4, so remove any bootstrap.bundle.min.js in angular.json

npm install bootstrap@3 --save

5) Add correct injection in angular.json, the order is important

"scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

6) in the file where you use $(element).collapse add this after the imports

    declare var $: any;

7) now you can use 

    $(element).collapse();
user_56959750
Related