logo标签列表

如何在 Angular 6 项目中添加 Bootstrap？

javascripthtmlangularangular-ui-bootstrap
36

app.component.html

index.html

app.component.ts

我已经尝试在angular.json包中添加样式依赖，但显示模块未找到。添加了两个bootstrap文件。以下是两个文件的屏幕截图：

angular.json文件如下angular.json file

1
展示一下你尝试过的内容。 - Dimitar Tsonev
@phil 不是的，我只使用 Angular 2，并且之前的 angular-cli.json 文件已经更名为 angular.json。 - Nikhil S
@Phil 在添加了jQuery库、编译了JavaScript并在app.component.css中导入了bootstrap.min.css后，它正在引导，但是container类没有起作用。 - Nikhil S
@phil，虽然我在资产中没有style.css，但我创建了一个，可以吗？ - Nikhil S
投票重新开放此问题。由于Angular 2和6非常不同，因此它不是重复的问题。 - theMayer
显示剩余5条评论
4个回答
148

针对 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 而不是 v2

Angular v6 及更新版本

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

OPTION-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 中的文件路径不应包含前导点和斜杠。

即可以提供绝对路径而非相对路径。

在 .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链接

打开文件 src/index.html 并插入：

  • 在 head 部分的末尾插入 <link> 元素以包含 Bootstrap CSS 文件
  • 在 body 部分底部插入一个 <script> 元素以包含 jQuery
  • 在 body 部分底部插入一个 <script> 元素以包含 Popper.js
  • 在 body 部分底部插入一个 <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数组中注册它。

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数组中添加文件路径即可。

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

请重启你的服务器

`ng serve || npm start`
3
别忘了重新运行 'ng serve'。 - Mark
@Seiyria，我在答案中没有提到吗？ - Vikas
@Seiyria 我不同意。因为它已经被整个社区所接受，并且还包括替代 Bootstrap 的选项，所以我不会去更改它。 :) - Vikas
5
@Vikas，您可以持有不同的观点，但不涉及 jQuery 的任何 Angular2+ 解决方案都不被社区广泛接受。jQuery 会严重干扰 Angular2+ 处理 DOM 的方式，引起更多困难而非帮助。 - Seiyria
现在您可以使用：ng add @ng-bootstrap/schematics。从ng工作区文件夹中，这将添加ng-bootstrap，它不需要jquery和popper，即使您得到一个工作说它们丢失了。负责ng-bootstrap的团队尝试保持相同的浏览器兼容性，这是迄今为止最简单的方法（我的意见）。 - Norcino
显示剩余11条评论
11
npm install --save bootstrap

之后，在项目根目录下的angular.json（之前为.angular-cli.json）中，找到styles并像这样添加 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"
],
1
这是否自动包含其他内容，例如bootstrap-grid等？ - CodyBugstein
对于旧版本：npm install bootstrap@3.3.7 --save - Himalaya Garg
6
npm install bootstrap --save

并将相关文件添加到 angular.json 文件中的 style 属性下，用于 CSS 文件，而 JS 文件则添加到 scripts 下。

 "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   ....
]
1
不对，根据我的了解，你仍需要添加“--save”才能更新“.package.json”。 - Pardeep Jain
1
是的，但是其他选项如 --save-dev 和另一个可选依赖项仍需要显式标志。 - AD8
需要使用jQuery吗？ - Sunil Garg
@SunilGarg 这取决于你的需求。顺便提一下，根据社区的反馈，使用 jQuery 和 Angular 不是一个推荐的方法。 - Pardeep Jain
@PardeepJain，是的，这并不推荐，所以我问了一下是否需要使用jQuery来使用Bootstrap？ - Sunil Garg
显示剩余6条评论
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"
],
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接