Question

我开始学习Angular，并且正在学习教程。我尝试按照导航栏中的教程放置代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

但是我得到的只是这个：

如果我删除了引导程序，则会得到其他项。

我在styles.css中使用npm install bootstrap --save和@import "~bootstrap/dist/css/bootstrap.css";来使用引导程序。

编辑：

我不想打开一个有两个问题的问题，但是在看了迄今为止无法正确描述另一个问题的答案后，我就遇到了：

我还使用nmp install jquery --save安装了Jquery，并将其添加到angular.json：

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/tether/dist/js/tether.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"

在这种情况下，从styles.css中删除@import "~bootstrap/dist/css/bootstrap.css";之后，引导程序根本无法工作。我引导程序正常工作的唯一方法是我在问题中所描述的。

编辑2：

我开始了一个新项目，并按照@HDJEMAI的回答说明进行操作。现在，我仍然获得与图片相同的页面，但是它现在通过在angular.json中添加到样式和脚本中的行而不是通过styles.css文件中的@import "~bootstrap/dist/css/bootstrap.css"来工作。但是，即使代码相同，问题仍然与教程中的问题不同。

这是他在本教程中得到的：

Answer 1

如果要将引导程序路径添加到angular.json文件中，请确保它是project \ architect \ build 中的样式。不是project \ architeect \ test 中的一个。

{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],

Answer 2

您必须同时安装bootstrap和JQuery：

npm install bootstrap jquery --save

然后，您将在节点模块文件夹中找到以下文件：

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

然后，您必须更新您的 angular.json 文件：

"styles": [
    "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"
  ],

如果不添加jquery.min.js脚本，Bootstrap将无法工作。

另一个要求是 popper.js ，如果您需要 Bootstrap下拉列表，则需要安装它并将脚本文件添加为好吧

npm install popper.js

然后也添加此脚本

"styles": [
    "styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/popper.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Bootstrap dropdown require Popper.js (https://popper.js.org)

Answer 3

亲爱的朋友iam正在学习相同的angular6教程。我也遇到了同样的情况。终于我解决了这个问题首先卸载引导程序。下一步是按照以下命令安装引导程序

npm install --save bootstrap@3 A

下一步转到styles.css并粘贴

@import "node_modules/bootstrap/dist/css/bootstrap.css"

您的应用程序绝对可以与udemy的视频教程中的应用程序完全一样

Answer 4

我有同样的问题。下面对我有帮助。

停止服务器并使用重新编译 ng服务

Answer 5

在安装引导程序并将其添加到angular.json文件之后。

如果引导程序未呈现，则只需更改开发URL的端口即可：

ng serve --port <your choice of port>

Answer 6

对我来说，我必须同时做，复制 angular.json 中的 node_modules jquery 和 bootstrap js 文件

    "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"
    ]

并在styles.css中复制@import "~bootstrap/dist/css/bootstrap.css";

Answer 7

添加您的angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

然后重新运行您的项目

Answer 8

请检查您所有的.component.ts文件，尤其是recipe.component.ts。也许有像

这样的CSS封装调整

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

如果是这样。您应该删除封装属性。

Answer 9

在 style.css 中添加这一行，它会起作用。

@import "~bootstrap/dist/css/bootstrap.css";

谢谢

Answer 10

我也遇到了完全相同的问题。经过大量的反复试验，我终于发现问题在于将 bootstrap 3 语法与 bootstrap 4 库一起使用。检查 package.json 中的引导程序版本，然后确定引导程序语法。更新此 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">，您的代码应该可以工作了。

Answer 11

我首先检查“ 构建”和“测试”部分下的“样式”和“脚本”

Answer 12

我面临着同样的问题，我也遵循udemy的相同做法，在外部nav标签中添加了“ nav-expand-lg”类，从而解决了我的问题。我的angular.json文件也与@HDJEMAI回答的相同

<nav class="navbar nav-expand-lg navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

Answer 13

使用VS代码编辑器的引导项存在相同的问题。我在ng build之前尝试过ng serve，引导项目也能正常工作。

Answer 14

在您的index.html文件中添加这3个链接。您无需安装bootstrap或jquery或更新您的angular.json文件。很有魅力。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

Answer 15

我检查了很多方式

"../"... 要么 "./"... 或/ 我也不想在“ style.css”中使用，因为也许要添加一些“ js”文件或依赖于“ js”文件的“ css”文件由于这个原因最好的方法是

 "styles": [
                        "src/styles.css",
                        "node_modules/bootstrap/dist/css/bootstrap.min.css"
                    ],
                    "scripts": [
                        "node_modules/jquery/dist/jquery.min.js",
                        "node_modules/popper.js/dist/umd/popper.min.js",
                        "node_modules/bootstrap/dist/js/bootstrap.min.js"
                    ]

不仅要重启浏览器或IDE，还要重启PC

Answer 16

很累，但是今天这对我有用：

package.json

  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

angular.json

            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 17

我认为是因为引导程序存在问题，请尝试以下操作：

第1步。 内部.angular-cli.json文件

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

删除"../node_modules/bootstrap/dist/css/bootstrap.min.css"

第2步。 转到styles.css

通过添加此行来导入引导程序

@import "~bootstrap/dist/css/bootstrap.css";

这些步骤解决了我在构建过程中遇到的错误。

Answer 18

Bootstrap在Angular 6/7/8中无法正常工作

我在网络上尝试了大多数解决方案，对我来说却无济于事

只有下面的代码对我有用

无需更改angular.json

直接将以下行添加到style.css文件中

{{1}}

因为在angular.json中，我们已经提供了style.css的引用

Answer 19

正如我所看到的，如果您遵循UDEMY中的“ MaximilianSchwarzmüller”课程，请确保您已安装Bootstrap 3，而不是其他任何东西。在您的项目文件夹中使用这些命令（仅在安装了其他版本的情况下才进行卸载）。

npm uninstall --save bootstrap
npm install --save bootstrap@3

这会将它本地安装到您的项目中。

我安装了Bootstrap4（认为该课程仍然可以使用4而不是3），并且使用Bootstrap3可以在与该课程相同的项目中使用（没有popper和jQuery）。

Answer 20

我做了与上述答案完全相同的事情，但仍然遇到相同的问题。就我而言，我指的是angular.json中的popper.js路径错误

"node_modules/popper.js/dist/js/popper.js",

代替

"node_modules/popper.js/dist/umd/js/popper.js",

Answer 21

上面的方法很好，但是即使您所做的一切正确，有时它有时仍然可行。我个人更喜欢手动下载css / js并将其保存在资产文件夹中，并在index.html中提供链接。如果有任何问题，浏览器控制台会告诉您问题所在，而在常规方法中，浏览器控制台不提供任何信息/错误。

Answer 22

install npm install bootstrap@latest jquery --save
install npm install popper.js;

然后转到Angular.json文件（第47行），使用此命令更改行：

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/popper.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Answer 23

要使引导程序正常运行，您需要添加jQuery和popper，

使用NPM安装bootstrap，jQuery和popper

1）安装引导程序 npm install bootstrap --save

2）安装jQuery npm install jquery --save

3）安装Popper npm install popper.js-保存

4）检查相应文件是否已安装在node_modules文件夹中 5）在angular.json文件中，按照以下顺序提供已安装文件的路径：-

"scripts": [              
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

5）再次运行ng serve，Bootstrap应该可以正常工作了！

Answer 24

您缺少引导程序的JavaScript部分和字体。这就是为什么您看不到导航栏的折叠部分的原因。 Bootstrap使用jQuery，因此不能与angular一起使用。

Bootstrap和Angular已经集成在一个单独的项目中。尝试使用此功能：https://angular-ui.github.io/bootstrap/

Answer 25

添加引导程序的另一种简便方法是将CDN链接放在index.html的头部（在这种情况下，无需通过npm安装引导程序）：

链接rel =“ stylesheet” href =“ https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”

这将起作用！

Bootstrap在Angular 6中无法正常工作

25 个答案: