在Angular 4项目中安装了ng引导CSS，但它没有'；我好像不工作

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

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

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

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

然后像这样引导ng：

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

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

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

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

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

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

然后我将其添加到angular-cli.json中（我甚至包括了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-cli.json中的几行，因此该文件如下所示：

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

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

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

“样式”：[
//“./node_modules/bootstrap/dist/css/bootstrap.min.css”，
//“./node_modules/font awesome/css/font awesome.min.css”，
“风格。”
//“styles.css”
],
“脚本”：[
//“./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，所以我发现这个解决方案对我来说很奇怪

这是我的项目的截图

---

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

npm安装--save@ng bootstrap/ng bootstrapbootstrap@4.0.0-alpha.6字体很棒

运行此命令时，我在控制台中看到一条关于未满足依赖项的警告。我不认为这是相关的，如果你只是想包括css文件，因为你的问题似乎表明，但我包括它的完整性

为了修复未满足的依赖项，我运行了npm安装--save@angular/core@^4.0.3@angular/common@^4.0.3@angular/forms@^4.0.3@angular/platform-browser@4.2.6rxjs@^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

启动了该应用程序，将其加载到浏览器中，并查看应用的样式。如果您真的想使用软件包提供的其中一个模块，请提供更多详细信息。

问题在于引导CSS并不是通过NPM自动应用的

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

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

---

干杯

也很有帮助：我还没有尝试使用任何其他软件包模块，只是尝试确保ngbootstrap在前端看起来正确。我注意到的一件事是，您说您使用ng run start启动。我在一个VisualStudioWebAPI应用程序中，所以这部分略有不同。你认为这需要我忘记的其他配置吗？angular-cli.json以外的其他内容您使用的是什么版本的Asp.Net？您是否也使用WebApi或MVC？.NET4.5.2我认为它只是web api，但当我查看web.config时，我看到了您的文件夹结构是什么样的？最有可能的是IIS试图提供“默认文档”，可以是任意数量的文件，但index.html就是其中之一，我假设您正在使用它。如果index.html位于网站的根目录中（与web.config的级别相同），IIS应该找到它并提供服务。如果它是在任何其他级别，那么查看它的最简单方法就是将其添加到您的url中。您仍然没有从问题中获得所需的答案。如果没有@import语句，您的浏览器中的开发控制台中是否有任何错误？如果有，错误是什么？@peinearydevelopment没有，事实上，当我注释掉整个angular-cli.json文件时，我没有任何错误，一切正常。这几乎就像没有查看angular-cli.json一样。我猜在更新angular-cli.json文件后，您没有运行

npm run build

。如果您这样做了，那么您应该能够打开dist/styles.bundle.js文件并查看对bootstrap/dist/css/bootstrap.min.css的引用。如果没有，则导入正在进行，与Angulary无关。@peinearydevelopment此项目没有src目录。有什么建议吗？用你的目录结构或屏幕截图更新你的问题。我已经说过很多次了，你需要提供更多的信息。