How to include Jquery/Bootstrap files into the stack Webpack/angular2/typescript

Question

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:

• imports-loader into webpack.config
• import "jquery" into vendor-browser.ts
• require("jquery") into my ts files

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!

Answer 1

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.

Answer 2

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?$' }
]

Answer 3

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