jQuery is not defined in bootstrap-sass

Question

I bootstrapped the Angular 2 app using angular-cli. Everything was easy-peasy until I decided to use bootstrap modal. I simply copied the code for opening the modal from our other project that doesn't use angular-cli. I added jquery and bootstrap dependencies to scripts in angular-cli.json file. jQuery is recognised in the project, but when I try to run this.$modalEl.modal(options) inside angular component I get an error that jQuery is not defined.

Actually jQuery is imported into project but as a global $. I've done some digging and apparently bootstrap expects jQuery to be passed into it as a 'jQuery' variable. It doesn't give rat's ass about $.

I could expose jQuery as a variable in webpack.config.js file like we do in other project: (a lot of code omitted for brevity)

var jQueryPlugin = {
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery'
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: 'svg4everybody/dist/svg4everybody.js'
  }))
}

but angular-cli dev team decided not to let other devs meddle with webpack config files. Thanks guys! Very thoughtful of you.

I've tried importing jQuery directly into Angular component and a bunch of other things mentioned here https://github.com/angular/angular-cli/issues/3202 (adding imports to vendor.ts file and then adding vendor.ts to scripts array in angular-cli.json) but nothing works.

To be honest, I am quite pissed that such a trivial issue like adding jquery dependency to be used with bootstrap in angular-cli is such a minefield.

Have you dealt with similar problem?

jQuery is not defined in bootstrap-sass

3 Answers