标签：html javascript angular angular-ui-bootstrap
参见英文答案 > How to use bootstrap 4 in angular 2? 11个
app.component.html
app.component.ts
我试图在angular.json包中添加样式依赖项,但显示找不到该模块.添加两个引导程序文件.
这是两个文件的屏幕截图
angular.json文件就像这个angular.json file
解决方法:
您使用的是Angular v6而不是2
Angular v6 Onwards
角度6以上的CLI项目将使用angular.json而不是.angular-cli.json进行构建和项目配置.
每个CLI工作空间都有项目,每个项目都有目标,每个目标都可以有配置
. {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
选项1
执行npm install bootstrap @ 4 jquery –save
Bootstrap的JavaScript部分依赖于jQuery.所以你也需要jQuery JavaScript库文件.
在angular.json中,将文件路径添加到构建目标下的样式和脚本数组中
注意：
在v6之前,Angular CLI项目配置存储在< PATH_TO_PROJECT> / .angular-cli.json中.从v6开始,文件的位置变为angular.json.由于不再有前导点,因此默认情况下不再隐藏文件并且该文件位于同一级别.
这也意味着angular.json中的文件路径不应包含前导点和斜杠
i.e you can provide an absolute path instead of a relative path
在.angular-cli.json文件中Path是“../node_modules/”
在angular.json中,它是“node_modules /”
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"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
将文件从CDN(内容分发网络)添加到项目CDN LINK
打开文件src / index.html并插入
< link> head部分末尾的元素包含Bootstrap CSS文件
一个< script>要在主体部分底部包含jQuery的元素
一个< script>要在主体部分底部包含Popper.js的元素
一个< script>要在主体部分底部包含Bootstrap JavaScript文件的元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
方案3
执行npm install bootstrap
在src / styles.css中添加以下行：
@import“~bootstrap / dist / css / bootstrap.css”;
OPTION-4
ng-bootstrap它包含一组基于Bootstrap标记和CSS的原生Angular指令.因此,它不依赖于jQuery或Bootstrap的JavaScript
npm install --save @ng-bootstrap/ng-bootstrap
安装完成后,将其导入根模块并将其注册到@NgModule imports`数组中
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
注意
ng-bootstrap需要在项目中添加Bootstrap的4 css.你需要通过以下方式明确安装它：
npm install bootstrap @ 4 –save
在angular.json中,将文件路径添加到under build target下的styles数组中
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
标签：html,javascript,angular,angular-ui-bootstrap 来源： https://codeday.me/bug/20190919/1812866.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。