Home » Jquery » angular – Getting exception jQuery must be included before Bootstrap's JavaScript

angular – Getting exception jQuery must be included before Bootstrap's JavaScript

Posted by: admin February 22, 2020 Leave a comment

Questions:

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?

How to&Answer:

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.

Answer:

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;