Ich habe mir eine Navbar in Angular 9 mit Bootstrap 4 erstellt:
header.component.html
Wenn ich es direkt über index.html die Bootstrap und JQuery lade wird es korrekt dargestellt.
index.html
Binde ich es aber über
npm install bootstrap --save npm install jquery --save npm install popper.js --save und natürlich mit setzen der angular.json
Werden die Menüpunkte nicht nebeneinander sondern untereinander angezeigt. Das Bootstrap geladen wird, erkenne ich an dem Button in der index.html Könnt mir bitte jemand sagen was hier gerade schiefläuft
header.component.html
<nav class="navbar navbar-inverse" id="header">
<div class="container-fluid">
<ul class="nav navbar-nav white_color">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Users<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/users">List</a></li>
<li><a routerLink="/user">Add User</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Projects<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/projects">List</a></li>
<li><a routerLink="/project">Add Project</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a routerLink="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="container-fluid">
<ul class="nav navbar-nav white_color">
<li class="active"><a href="/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Users<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/users">List</a></li>
<li><a routerLink="/user">Add User</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" routerLink="#">Projects<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/projects">List</a></li>
<li><a routerLink="/project">Add Project</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a routerLink="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0w wj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uk sdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmST sz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2b WYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mG CD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
<button type="button" class="btn btn-primary">Primary</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0w wj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3Uk sdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmST sz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2b WYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mG CD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
<button type="button" class="btn btn-primary">Primary</button>
</body>
</html>
npm install bootstrap --save npm install jquery --save npm install popper.js --save und natürlich mit setzen der angular.json
...
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
Kommentar