我正在寻找有关如何调试此问题的建议。我像这样安装了 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"
我可以说这一切都不起作用,因为像这样简单的东西甚至没有显示正确的结果:
<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,所以我发现的这个解决方案对我来说似乎很奇怪......
最佳答案
您确实需要在问题中显示更多信息。这些是我遵循的步骤,对我来说效果很好。
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,则无需导入这些模块,但由于您拥有它们,我尝试添加它们以保持一致性。
此时我所要做的就是更新 .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 - 在 Angular 4 元素中安装了 ng-bootstrap CSS,但它似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45064881/