【问题讨论】：
angular.json 文件
标签： javascript html angular angular-ui-bootstrap
配置
您的 angular.json 配置中的样式和脚本选项现在允许直接引用包：
之前："styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
之后："styles": ["bootstrap/dist/css/bootstrap.css"]
"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","bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"jquery/dist/jquery.min.js",
"bootstrap/dist/js/bootstrap.min.js"
]
},
Angular v6 以后
从 Angular 6 开始的 CLI 项目将使用 angular.json 而不是 .angular-cli.json 进行构建和项目配置。
每个 CLI 工作区都有项目，每个项目都有目标，每个目标可以有配置。Docs
. {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
OPTION-1
执行npm install bootstrap@4 jquery --saveBootstrap 的 JavaScript 部分依赖于 jQuery。所以你也需要 jQuery JavaScript 库文件。
在您的 angular.json 中，将文件路径添加到 build 目标下的样式和脚本数组
注意：
在 v6 之前，Angular CLI 项目配置存储在 <PATH_TO_PROJECT>/.angular-cli.json. 中，从 v6 开始，文件的位置更改为 angular.json. 由于不再有前导点，因此默认情况下文件不再隐藏并且处于同一级别。
这也意味着 angular.json 中的文件路径不应包含前导点和斜线
即您可以提供绝对路径而不是相对路径
在.angular-cli.json 文件路径为"../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 并插入
head 部分末尾的 <link> 元素包含 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
安装后将其导入根模块并在@NgModuleimports`数组中注册
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 中，将文件路径添加到 build 目标下的样式数组
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
【讨论】：
angular.json 中添加了引导程序，index.html 中的链接和脚本是多余的，看看它是否有效
npm install --save bootstrap
然后，在项目根文件夹内的angular.json（以前的.angular-cli.json）中，找到样式并添加引导 css 文件，如下所示：
对于角度 6
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
对于角度 7
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
【讨论】：
npm install bootstrap --save
并将相关文件添加到 angular.json 文件中 style 属性下的 css 文件和 scripts 下的 JS 文件。
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
....
]
【讨论】：
--save 吗？我想我在某处读到，如果您使用的是 npm > v5，则不需要它。
--save 才能更新.package.json
--save 所做的只是向 package.json 添加一个依赖项，那么我可以确认如果使用 npm v5.6.0 则不需要它。刚刚在测试角度项目中确认了这一点。 :-)
--save-dev 这样的其他选项和另一个用于可选依赖的选项仍然需要明确的标志。
使用命令
npm install bootstrap --save
打开 .angular.json 旧 (.angular-cli.json ) 文件找到“样式”添加引导 css 文件
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
【讨论】：