如何在angular6项目中添加bootstrap？

Question

我尝试在 angular.json 包中添加样式依赖项，但显示找不到该模块。添加两个 bootstrap 文件。这是两个文件的屏幕截图

angular.json文件是这样的angular.json file

Answer 1

npm install --save bootstrap

之后，在项目根文件夹中的 angular.json（之前是 .angular-cli.json）中，找到样式并添加 bootstrap css 文件，如下所示：

对于angular 6

"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
],

对于angular 7

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
],

Answer 2

npm install bootstrap --save

并将相关文件添加到 angular.json 文件中 style 属性下 css 文件和 scripts 下的 JS 文件。

 "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   ....
]

Answer 3

使用命令

npm install bootstrap --save

开.angular.json旧(.angular-cli.json) 文件找到 "styles" 添加 bootstrap css 文件

"styles": [
       "src/styles.scss",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Answer 4

对于 Angular 版本 11+

配置

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 版本 10 及以下

您使用的是 Angular v6 而不是 2

Angular v6 Onwards

从 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": {}
  },
}

选项-1
执行 npm install bootstrap@4 jquery --save
Bootstrap 的 JavaScript 部分依赖于 jQuery。所以你也需要 jQuery JavaScript 库文件。

在您的 angular.json 中，将文件路径添加到 build 目标
下的样式和脚本数组 注意： 在 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 文件路径中是 "../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> 元素包含 Bootstrap CSS 文件
一个 <script> 元素包含在 body 部分的底部 jQuery
一个 <script> 元素包含在 body 部分的底部 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";

选项-4
ng-bootstrap 它包含一组基于 Bootstrap 标记和 CSS 的本机 Angular 指令。因此，它不依赖于 jQuery 或 Bootstrap 的 JavaScript

npm install --save @ng-bootstrap/ng-bootstrap

安装后将其导入根模块并在 @NgModule imports` array

中注册

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 下的样式数组 target

   "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],

P.S 重启你的服务器

`ng serve || npm 开始`

如何在angular6项目中添加bootstrap？

How to add bootstrap in angular 6 project?

html

javascript

angular-ui-bootstrap

angular

对于 Angular 版本 11+

Angular 版本 10 及以下

P.S 重启你的服务器