在 Angular 9 项目中使用没有 JQuery 的 Bootstrap 4
[英]Using Bootstrap 4 without JQuery in Angular 9 project
问题描述
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.
我正在尝试删除我的 Angular 项目中的所有 JQuery 依赖项和用法，这是由使用 Bootstrap 4 引起的。我删除了下拉列表和所有data-***用法。 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.但是，一旦我卸载了 JQuery 和 popper.js，我就会看到 TypeError 消息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.在我的 web 控制台中。 I am wondering if there are other dependencies data-*** or the Bootstrap dropdown or collapse.. Are Bootstrap button classes depending on JQuery too?我想知道是否还有其他依赖项data-***或 Bootstrap 下拉菜单或折叠.. Bootstrap 按钮类是否也取决于 JQuery？
3 个解决方案
解决方案1
2 2020-12-20 12:06:24
To remove bootstrap JS dependency:要删除引导 JS 依赖项：
Check your angular.json file and look for scripts property.检查您的angular.json文件并查找scripts属性。 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.如果bootstrap.js或bootstrap.min.js存在，则将其删除。
If that section is empty then check index.html and check the <head> section for bootstrap.如果该部分为空，则检查index.html并检查<head>部分是否有引导程序。 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.删除引导程序和 jquery <script src=...行。
To be on safe side.为了安全起见。 Restart your angular dev server then ng serve重新启动您的 angular 开发服务器，然后ng serve
解决方案2
0 2020-12-19 23:20:14
You can use ng-bootstrap npm package which is designed to eliminate the need for jquery ,您可以使用ng-bootstrap npm package旨在消除对 jquery 的需要，
If you are using Angular 10 and above, it will be installed directly in the Module.ts.如果您使用的是Angular 10及以上版本，它将直接安装在 Module.ts 中。
Otherwise, simply add it like this否则，只需像这样添加它
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
imports: [NgbPaginationModule, NgbAlertModule],
})
export class YourAppModule {
}
解决方案3
0 已采纳
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 .如果它是通过 npm 包含的，那么您需要运行npm uninstall bootstrap 。 Next, go the angular.json file and check ctrl + f for any bootstrap includes, specially here:接下来，go angular.json 文件并检查ctrl + f是否包含任何引导程序，特别是在这里：
"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 .删除引导程序的所有导入后，重新启动应用程序： 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.如果您仍然收到错误，那么很可能是某些文件试图使用 JQuery 而不是引导代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.