Currently, I am delving into the world of Angular2 CLI on my local server at http://localhost:4200/. Following the tutorial from , I have successfully installed Angular2.
However, I encountered an issue while trying to import Bootstrap4 CSS. I attempted to add the following code snippet to my src/angular.json file:
"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"
],
In addition, I inserted a bootstrap sample navbar into my 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>
I seem to be encountering the
[WDS] Disconnected!error locally.
https://i.sstatic.net/DBC5u.png
To resolve this, I tried adding
import 'src/assets/css/bootstrap.css';style.css, but it ended up as an inline style and did not produce the desired outcome.
While including the index.html header using <link src="" does work, I would prefer an alternative method. Any assistance on this matter would be greatly appreciated. Thank you in advance.