Using Bootstrap 4 without JQuery in Angular 9 project
Question
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. 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
solution1
2 2020-12-20 12:06:24
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
solution2
0 2020-12-19 23:20:14
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 {
}
solution3
0 ACCPTED
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.