Javascript 将Boostrap4导入angular2 CLI

我正在我的课堂上学习Angular2 CLI。我遵循教程，成功安装了Angular2

我在这里导入bootstrap4 css时遇到问题。我已经在我的

src/angular.json

文件中尝试了以下代码

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.css",
  "src/assets/css/bootstrap.min.css",
  "src/assets/css/style.css"
],
"scripts": [
  "src/assets/js/jquery.min.js",
  "src/assets/js/bootstrap.min.js"
],

我已将引导示例导航栏添加到我的

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>      
    </ul>
  </div>
</nav>

---

我正在断开

[WDS]连接我的本地代码中的错误


我尝试过添加
import'src/assets/css/bootstrap.css'
进入我的
style.css
中，但它作为内联样式工作并没有获得所需的输出

如果我尝试使用
包含
index.html
标题，我知道这并不能100%回答您的问题，但是如果您计划在Angular项目中使用引导，我建议您改用引导，因为它与Angular完全兼容，而且最重要的是，不需要安装Jquery

1） 要安装它，只需运行
npmi@ng bootstrap/ng bootstrap

2） 要将任何引导组件（如modals和alerts）安装到您的组件中，只需执行以下操作即可将所需的引导模块导入到您的模块：
import{NgbAlertModule}from'@ng Bootstrap/ng Bootstrap'
Do

npm install bootstrap

并将其从节点模块文件夹导入样式。css
尝试此命令

npm install bootstrap@4 jquery --save 

编辑Angular.json文件后，修改`“样式”

&

对不起，我不想使用
ng引导程序
@Saravana明白。无论如何，在安装引导css时，我使用了与您类似的方法。。我提取了它并将其包含在
angular.json
的
style
中。不应该有任何问题，好的。我将再次尝试重新安装。
[WDS]已断开连接错误。你知道如何解决这个问题吗？这个方法安装了所有的dist文件，包括很多库。只需导入bootstrap.min.css文件，应该在dist/assets/css/I中。但它将安装所有引导库，如
\u scss
[WDS]断开连接错误。您知道如何解决此问题吗？WDS:Webpack Developer Server，如果它发生在您导入引导后，请检查您的导入，并在console和chrome Developer工具中检查任何错误日志。您是否尝试更改app.component.ts文件中css文件的路径
styleUrls:['path\u to_css\u file']
@LahiruMirihagoda我通过重新安装
angular cli
几乎实现了所有功能，除了断开的
[WDS]之外错误。我认为这与css无关。因此，如果你能检查这个链接@LahiruMirihagoda，你就不会理解github链接。无论如何，谢谢你的时间。
["node_modules/bootstrap/dist/css/bootstrap.css"]`

"script:["/node_modules/jquery/dist/jquery.js"]`and ["node_modules/bootstrap/dist/ js/boostrap.js"`]