javascript – 如何在angular 6项目中添加bootstrap？

参见英文答案 > How to use bootstrap 4 in angular 2? 11个
app.component.html

index.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"
   ],

javascript – 如何在angular 6项目中添加bootstrap？

相关推荐