在 Angular 4 项目中安装了 ng-bootstrap CSS，但它似乎不起作用

Posted 2023-03-06

【中文标题】在 Angular 4 项目中安装了 ng-bootstrap CSS，但它似乎不起作用

【英文标题】：Installed ng-bootstrap CSS in Angular 4 project, but it doesn't seem to be working

【发布时间】：2017-12-17 07:21:41

【问题描述】：

我正在寻找有关如何调试此问题的建议。我这样安装引导程序：

npm install --save bootstrap@4.0.0-alpha.6

然后像这样 ng-bootstrap：

npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-alpha.6 font-awesome

我将此添加到我的 app.module.ts：

import  NgbModule       from '@ng-bootstrap/ng-bootstrap';

imports: [
    BrowserModule, 
    FormsModule,
    HttpModule,
    AppRoutingModule,
    NgbModule.forRoot()
  ],

然后我将它添加到我的 angular-cli.json 中（我什至包括了 js 脚本，但这不应该是必需的）

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"

我可以说这些都不起作用，因为像这样简单的事情甚至没有显示正确的结果：

<table class="table-striped">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

我正在使用带有 angular 4 前端的 .Net Web API 后端，我使用 npm 安装了所有 angular4、bootstrap、ng-bootstrap 和 Font Awesome 的东西。

更新： 所以我似乎已经解决了这个问题，但我仍在寻找为什么这个改变解决了它。我将这两行添加到 sytles.css 类中：

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";

并从 angular-cli.json 中注释掉几行，使文件看起来像这样：

"styles": [
    //"../node_modules/bootstrap/dist/css/bootstrap.min.css",
    //"../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.<%= styleExt %>"
    //"styles.css"
  ],
  "scripts": [
    //"../node_modules/jquery/dist/jquery.min.js",
    //"../node_modules/tether/dist/js/tether.min.js",
    //"../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

谁能解释为什么将 import 语句放在 styles.css 中有效，但在 angular-cli.json 中引用相同的文件却没有？我关注的教程都显示了 angular-cli.json 而不是 styles.css 中的引用，所以我发现的这个解决方案对我来说似乎很奇怪......

这是我项目的截图

【问题讨论】：

如果没有@import 语句，您是否在浏览器的开发控制台中遇到任何错误？如果是，它们是什么？

@peinearydevelopment 不，事实上，当我注释掉整个 angular-cli.json 文件时，我没有收到任何错误，一切正常。这几乎就像 angular-cli.json 没有被查看。

我的猜测是更新 angular-cli.json 文件后，你没有运行npm run build。如果你这样做了，那么你应该能够打开你的 dist/styles.bundle.js 文件并看到对 bootstrap/dist/css/bootstrap.min.css 的引用。如果你没有，那么导入是通过css imports 进行的，与角度无关。

@peinearydevelopment 该项目没有 src 目录。对此有何建议？

用您的目录结构或屏幕截图更新您的问题。我多次说过，您需要提供更多信息。

【参考方案1】：

问题是 Bootstrap CSS 没有通过 NPM 安装而自动应用。

我遇到了同样的问题，在经历了上述两个解决方案之后，我发现这两个解决方案都试图使 bootstrap css 可用于项目。 @peinearydevelopment 所做的是将其包含在 cli.json 文件中（需要重新启动服务器），而 @adam 所做的是手动调用它们在样式中的可用性。 css 文件。 （不需要重启服务器）

感谢以上两个答案，因为它们都是正确的，我都试过了。

干杯

【参考方案2】：

您确实需要在问题中显示更多信息。这些是我遵循的步骤，对我来说效果很好。

npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-alpha.6 font-awesome

运行此命令后，我在控制台中看到有关未满足依赖项的警告。如果您只想像您的问题所表明的那样包含 css 文件，我认为这无关紧要，但为了完整性，我将其包含在内。

为了修复未满足的依赖关系，我运行了npm install --save @angular/core@^4.0.3 @angular/common@^4.0.3 @angular/forms@^4.0.3 @angular/platform-browser@4.2.6 rxjs@^5.0.1 zone.js@^0.8.4

考虑到这一点，我尝试更新我的src/app/app.module.ts 文件以使其看起来更像您拥有的文件，但不确定AppRoutingModule 是从哪里导入的。同样，我相信如果您只想从引导程序中获取 css，则不需要导入这些模块，但既然您拥有它们，我尝试添加它们以保持一致性。

此时我所要做的就是更新.angular-cli.json 文件。我补充说： "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css" 到“styles.css”条目下的样式数组。然后我使用ng run start 启动应用程序，将其加载到浏览器中并查看应用的样式。如果您确实想使用软件包提供的模块之一，请提供更多详细信息。

【讨论】：

也有帮助：github.com/angular/angular-cli/wiki/stories-include-bootstrap

我还没有尝试使用任何其他包模块，只是想确保 ngbootstrap 在前端看起来正确。我注意到的一件事是您说您使用 ng run start 启动。我在一个 Visual Studio Web api 应用程序中，所以这部分略有不同。你认为这需要我忘记的其他配置吗？ angular-cli.json 以外的东西

您使用的是什么版本的 Asp.Net？您是否也只使用 WebApi 或 MVC？

.Net 4.5.2 我认为这只是 web api，但是当我查看 web.config 时，我看到

那么你的文件夹结构是什么样的？ IIS 很可能正在尝试提供“默认文档”，它可以是任意数量的文件，但 index.html 就是其中之一，我假设您正在使用它。如果 index.html 在网站的根目录中（与 web.config 相同的级别），IIS 应该找到它并提供它。如果它位于任何其他级别，那么查看它的最简单方法是将其添加到您的 url，例如localhost:4325/dist/index.html。你的问题仍然缺少太多细节，无法得到你需要的答案。