I am trying to remove all JQuery dependencies & usages in my Angular project, which are caused by usage of Bootstrap 4. I removed the dropdown and all data-*** usages.
But once I uninstalled JQuery and popper.js, I see the TypeError message Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. in my web console. I am wondering if there are other dependencies data-*** or the Bootstrap dropdown or collapse.. Are Bootstrap button classes depending on JQuery too?
3 Answers
To remove bootstrap JS dependency:
Check your angular.json file and look for scripts property.
You should see something like this:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
If bootstrap.js or bootstrap.min.js is there then remove it.
If that section is empty then check index.html and check the <head> section for bootstrap. Something like this:
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
Same here. Remove bootstrap and jquery <script src=... lines.
To be on safe side. Restart your angular dev server then ng serve
Comments
The console error depends on how you have imported/installed bootstrap.
If it was included in via npm then you need to run npm uninstall bootstrap.
Next, go the angular.json file and check ctrl + f for any bootstrap includes, specially here:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Once you remove all imports of bootstrap, restart the app: ng serve.
If you're still getting an error then it's most probably some file that's trying to use JQuery other than Bootstrap code.
Comments
You can use ng-bootstrap npm package which is designed to eliminate the need for jquery,
If you are using Angular 10 and above, it will be installed directly in the Module.ts.
Otherwise, simply add it like this
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [NgbPaginationModule, NgbAlertModule],
})
export class YourAppModule {
}
bootstrap.jsin your Angular app. If you use bootstrap only for style (css only) then no need for jQuery. Butdata-toggleetc will not work.angular.jsonfile and look forscriptsproperty. Ifbootstrap.jsorbootstrap.min.jsis there then remove it. If that section is empty then checkindex.htmland check the<head>section for bootstrap.