CyrilleGuimezanes CyrilleGuimezanes - 1 month ago 4
Javascript Question

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

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

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.

Comments