angular - 如何包含 Bootstraps JS 依赖项
问题描述
我想在我的 Angular 7 应用程序中包含 Bootstrap 4。我做到npm install bootstrap --save
了,css样式工作正常,但是当我想从引导程序中使用折叠导航栏的按钮时,按钮没有反应。我认为这是因为在这种情况下,Bootstrap 依赖于 jquery 和 popper.js。我试图通过npm install jquery --save
和手动包含它们npm install popper.js --save
。但即使在那之后,我也无法在 node_modules 文件夹中找到这些模块,也不知道如何包含这些依赖项。
帮助将不胜感激。谢谢。
解决方案
这有效
检查 工作堆栈闪电
执行 npm 安装:~
npm i bootstrap jquery --save
选项1
添加以下内容
angular.json
:~
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
选项 2
将以下链接和脚本添加到您的
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
也是我package.json
的参考
{
"name": "angular-bootstrap-setup",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"jquery": "^3.4.1",
"popper": "^1.0.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
添加 node_modules 截图仅供参考
希望这有帮助!
推荐阅读
- python - python速成课程heroku ModuleNotFoundError:没有名为'bootstrap4'的模块
- spring-boot - 春季启动 logging.file.max-size 不起作用
- r - 如何在r中按范围分组?
- python - int() 参数必须是字符串、类似字节的对象或数字,而不是 'NoneType' - Django
- linux - GLIBC_2.17 已安装但仍然出现“`GLIBC_2.14' not found”错误
- r - 加快置信区间的复制
- python - 如何为 n 叉树编写线程安全程序以在 python 中保持一致
- mysql - 有没有办法可以从一张桌子到另一张桌子上找到丢失的数字?(比较)
- java - 将单播数据包发送到多播端口
- python - Python登录限制