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 scrips但是这不应该是必需的）

"../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>

我正在使用带有角度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"
  ],

有人可以解释为什么在styles.css中使用import语句有效，但是在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的位置。同样，我相信如果你只想从引导程序中获取css，那么这些模块都不需要导入，但是因为你有它们我试着添加它们以保持一致性。

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

Answer 2

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

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

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

干杯

在Angular 4项目中安装了ng-bootstrap CSS，但它似乎没有工作

2 个答案: