Add jquery to angular 2 wepack project (Bootstrap's JavaScript requires jQuery)

Question

I'm using the angular-cli .net core starter. Now I'm adding my own css + javascript and getting following error:

An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Bootstrap's JavaScript requires jQuery

I already tried:

npm install jquery

+

import $ from 'jquery'; => in app component

How do you configure jquery with webpack / angular2 ?

Thanks!

Why not using a dedicated Bootstrap + Angular integration that doesn't require jQuery nor Bootstrap's JS at all? ng-bootstrap.github.io — pkozlowski.opensource
– pkozlowski.opensource, Commented Mar 23, 2017 at 9:24

Michael Kang · Accepted Answer · 2017-03-23 06:59:20Z

1

Install the type definitions:

npm install @types/jquery

answered Mar 23, 2017 at 6:59

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepu Reghunath · Accepted Answer · 2021-05-11 10:24:26Z

0

steps

npm install jquery — save
Add "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] to angular-cli.json file
Import it into the component : import * as $ from 'jquery';

Example:

$(document).ready(function(){
    $("button").click(function(){ 
     ...
   } 
});

answered May 11, 2021 at 10:24

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

Collectives™ on Stack Overflow

Add jquery to angular 2 wepack project (Bootstrap's JavaScript requires jQuery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related