Getting exception jQuery must be included before Bootstrap's JavaScript

Question

I am getting below exception

bootstrap.js:240 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript

at Object.jQueryDetection (bootstrap.js:240) at bootstrap.js:255 at bootstrap.js:9 at bootstrap.js:10

This is my code in Angular.json

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": 
[
  "node_modules/jquery/dist/jquery.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"           
]

How can I fix this issue?

Kurt Hamilton · Accepted Answer · 2020-02-18 11:02:13Z

9

Surely "node_modules/jquery/dist/jquery.min.js" should come under "scripts"?

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": 
[
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"           
]

And the now duplicated jQuery file ""node_modules/jquery/dist/jquery.js" should be removed.

answered Feb 18, 2020 at 11:02

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

2 Comments

Kurt Hamilton Over a year ago

Have you checked your file system to see that those file paths exist?

L. Theodore Obonye Over a year ago

I made sure that jQuery and Bootstrap were properly installed into the project prior to adding these scripts. If jQuery is not installed you will get errors. The answer Kurt gave 100% correct.

jeprubio · Accepted Answer · 2020-02-18 11:16:25Z

3

If you want to use bootstrap in your application, or if you already have in your project, make sure to include jQuery before including the bootstrap JavaScript file. Bootstrap’s JavaScript file requires jQuery.

"scripts": [ "node_modules/jquery/dist/jquery.min.js",
           "node_modules/bootstrap/dist/js/bootstrap.js"]

After including jQuery, stop running your Angular CLI application. Then, re-run it using ng serve.

And then, if you want to use jQuery in your code at some point, all you have to do is to import it in whatever component you want to use jQuery.

import * as $ from 'jquery';

or

declare var $: any;

edited Feb 18, 2020 at 11:16

answered Feb 18, 2020 at 11:10

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Getting exception jQuery must be included before Bootstrap's JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related