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?
ng eject
and edit it?