Angular 7: Jquery and Bootstrap not working
Question
After installing Bootstrap and Jquery using this command npm install bootstrap --save still not able to get if bootstrap is installed in angular or not
Output:
HTML Template:
<div style="text-align:center">
<h1>
{{ title }}!
</h1>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" routerLink="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" routerLink="/page1">Page 1 <span class="sr-only">(current)</span></a>
</div>
</div>
</nav>
<button type="btn btn-primary">Hello</button>
</div>
<router-outlet></router-outlet>
Index.html: [Only if i am adding jquery & Bootstrap cdn in index.html then its working but i guess this is not a right solution right ?]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularAssignment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="hello">
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>
2 answers
solution1
2 ACCPTED 2019-02-28 17:13:48
As @Dániel Barta suggested, doing npm install isn't enough. Now you have to import your installed package to your application.
On the root level of your application find the file called angular.json .
Bootstrap :
- In that json file, search for
"styles"property which is representing an array of paths - Add
"node_modules/bootstrap/dist/css/bootstrap.min.css"to the end of that array
JQuery
- In that json file, search for
"scripts"property which is representing an array of, again paths, but this time, js files. - Add
"node_modules/jquery/dist/jquery.min.js"to the end of that array
If you want to use bootstrap.js, add the its path bellow jquery import:
JQuery + bootstrap.js :
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
So, Bootstrap css + jquery + bootstrap.js imports should look like this:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
],
If you already have your own paths in styles or scripts arrays, leave them, and add these paths to the bottom of the arrays.
Best advice I can give you is to go through Angular documentation, research a bit about installing packages and how it all works.
solution2
0 2019-02-28 16:55:50
If you can see them in the node_module folder. It's installed. But you also have to import the module and the CSS file in the Angular application. You can find a good material for Bootstrap here , and for the jQuery, you have to go to the .angular-cli.json file and it it to the scripts property: "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.