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

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;

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

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.