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

Question

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.

Solution 1

As mentioned in the comment , it seems to be an issue of Bootstrap requiring jquery to be global. A very similar question is answered in the following link :-

2 fullcalender instances in Angular component causes jquery not found error

The other option is define types for collapse as mentioned in -cloud's answer

Solution 2

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;

Solution 3

You should not specify your dependencies like that.

Since you've installed bootstrap and jQuery via npm/yarn, you ought to import them directly like import * as $ from 'jquery'; without configure something else. No scripts is needed.

scripts config is supposed to be treated as global script as script tag inside index.html, see the scripts story here.

Since collapse is a jquery plugin from bootstrap, you should do something like

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

to let typescript know its types.

update #1

you can install @types/bootstrap to skip defining the interfaces.

Solution 4

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();

Solution 5

Can you try calling jquery like :

    import $ from 'jquery/dist/jquery';

View more solutions

Comments

[Krishnanunni Jeevan]

Have you tried declaring jquery globally , you will miss the typings though. Instead of: import * as $ from 'jquery'; use declare var $:any;

[aherrick]

not sure I follow. Where does the interface collapse code go and why is it required? shouldn't it work regardless of types?

[e-cloud]

typescript, type is the most important feature. If typescript doesn't know what collapse method is, it just complains about it like you have.

[Elvin Garibzade]

it does not matter

[Jithin]

what is this change does actually? it worked for me. Just curious

[F3L1X79]

Hero of the day!

[Muhammad Noman]

YOU ARE THE GENIUS!