引导样式未以角度 10 加载答案

【问题标题】：Bootstrap styles not loading in angular 10引导样式未以角度 10 加载
【发布时间】：2021-07-25 13:14:06
【问题描述】：

我正在做一个项目，我正在使用 angular 10 并尝试使用 Bootstrap 库，但问题是 BootStrap 样式未加载。

在 package.json 中我可以看到引导程序依赖项。

"bootstrap": "^3.4.1",

我尝试以各种可能的方式进行调试，但由于我是 Bootstrap 的新手，所以我还无法弄清楚。

不想这样看到我的按钮。

任何帮助将不胜感激。

【问题讨论】：

标签： css angular visual-studio bootstrap-4

【解决方案1】：

当在 Angular 中使用 bootstrap 时，有几种添加方法。对我来说最有效的方法是在项目的根目录中运行 ng add @ng-bootstrap/ng-bootstrap，这将在 angular.json 和 package.json 中添加所需的数据.

我应该注意，您的 Angular Cli 版本必须大于 9。

【讨论】：

是的 CLI 版本是 10.0.3。
很高兴听到这个消息。您能否将此答案标记为答案，以便其他遇到相同问题的人知道去哪里寻找？

【解决方案2】：

我遇到了同样的问题，重新启动服务器后它对我来说工作正常。我使用 npm install 命令从 npm 安装它。

【讨论】：

如果您在服务器已经运行期间使用 npm install 命令安装，这是最好的方法。

【解决方案3】：

在 index.html 文件中包含引导链接 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 并重新编译它将工作的应用程序，或者第二种方法是将引导资产路径包含在 angular.json -> 项目 -> 架构师 -> 样式中

【讨论】：

试过了，还是不行。还有其他的走走吗？
只是在 angular.json 的样式部分添加样式。如果您只使用 ng-bootstrap（对我来说是最好的选择），请下载 bootstrap.min.css，复制到应用程序的文件夹中并在 angular.json 中指明

【解决方案4】：

又一次绕到这个，如果 bootstrap 安装成功，但 Bootstrap 样式仍未加载，只需添加

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

在你的 angular.json 中。

样式现在将可见。

【讨论】：

【解决方案5】：

我期待在 html <head> 部分看到 bootstrap.css，就像每个人都说的旧版本一样，但它被隐藏了，捆绑在浏览器的 styles.css 文件中。

只需要这些步骤：

npm install --save bootstrap

在 angular.json 中，取消构建（不是测试）：

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

现在再次运行ng serve

【讨论】：

【解决方案6】：

如果您在服务器已经运行时添加引导程序，它不会影响..我们应该重新启动服务器然后它会工作..如果没有检查以下步骤

确保您的 angular.json 文件中有此代码

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

要安装 bootstrap 和 jquery 使用这个 cmds ..首先去你的应用程序目录然后打开终端点击这个 cmds

npm install bootstrap@latest --save

npm install jquery@latest --save

【讨论】：

【解决方案7】：

转到 package.json 并检查版本是否正确。有时在安装 popper、jquery 和 bootstrap 时会遇到错误的组合。例如

//package.json
"dependencies": {
"bootstrap": "^4.6.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}

并且在 //angular.json

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

如果要修改文件包，请记住删除 node_modules 和 package-lock.json。最后用 npm install 重新安装

【讨论】：