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

Question

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

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"

我可以说 none 有效，因为像这样简单的东西甚至都没有显示正确的结果：

<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 class:

@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，所以我发现这个解决方案对我来说似乎很奇怪...

这是我项目的截图

Answer 1

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

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 是从哪里导入的。同样，我认为如果您只想要来自 bootstrap 的 css，则需要导入这些模块中的 none，但是由于您拥有它们，我尝试添加它们以保持一致性。

此时我所要做的就是更新 .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 启动了该应用程序，将其加载到浏览器中并看到应用的样式。如果您真的想使用软件包提供的模块之一，请提供更多详细信息。

Answer 2

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

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

感谢以上两位的回答，因为他们都是正确的，我都试过了。

干杯

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

Installed ng-bootstrap CSS in Angular 4 project, but it doesn't seem to be working

css

twitter-bootstrap

bootstrap-4

ng-bootstrap

angular