Into my project I use the stack Webpack/angular2 (with typescript).
I try to include the .js files of boostrap & jquery but I can't find a simple and well explain way...
I tried succesively to use:
I probably miss something...
I'm looking for a generic solution to include a .js file into the "window" object. Files are located into the node_modules folder.
Can someone help me?
Thanks!
If i understood you then ypu want to add jquery and bootstrap.js in your angular2 project
Here is example how i did.
add a plugin so jquery can be loaded before bootstrap
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
and if you have installed bootstrap and jquery with npm then just import them in your main file
import "bootstrap/dist/js/bootstrap.js";
import "jquery";
now you can test in browser's console by typing $ and it should show you that there is jquery loaded.
MrJSingh answer is almost correct. Except that when using ProvidePlugin $ will not be available in browser console. What this plugin doing is replacing every $ occurence with require(jquery).
So, it will not work if you are using external jquery plugins!
Also, when using this solution, I recommend include also window.jQuery as some plugins only work with such notation.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
'window.jQuery': "jquery"
})
If you need more universal solution, consider using expose-loader:
npm install expose-loader --save-dev
And then this :
require("expose?$!jquery");
or this right in webpack config:
loaders: [
{ test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]
One solution is this lib (for webpack)
https://github.com/shakacode/bootstrap-loader
Successor to bootstrap-sass-loader.
Load Bootstrap styles and scripts in your Webpack bundle.
This loader uses SASS to process CSS styles.
Bootstrap 3 & 4 are supported.
basic example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/basic
css module example: https://github.com/shakacode/bootstrap-loader/blob/master/examples/css-modules
