I installed bootstrap in angular 8 but not working.Why?
Solution 1
Change angular.json like this:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js", // <- jQuery goes first
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Also you can compare your code with authors version here. Text version of that tutorial.
Solution 2
all the solutions that involve relative paths in the test section of the angular.json file will fail.
The solution I used is:
I added the relative paths in the project block under build block. My Angular version is:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.20
Node: 12.13.1
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.20
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@schematics/angular 8.3.20
@schematics/update 0.803.20
rxjs 6.4.0
My angular.json file is:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-application": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-application",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-application:build"
},
"configurations": {
"production": {
"browserTarget": "first-application:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-application:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-application:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-application:serve:production"
}
}
}
}
}
},
"defaultProject": "first-application"
}
The mistake I did before was adding the css and scripts at the test block, please recheck the whole angular.json file and ensure you're in the right block and use a relative path to the node modules as shown above.
Better if you update your angular cli to the latest version.
Solution 3
If you install Bootstrap while live server is running, the bootstrap changes will not apply. Stop the live-server and start again
Related videos on Youtube
Amal Raj
Updated on May 26, 2022Comments
-
Amal Raj almost 2 years
I installed bootstrap 3.4.1 and jquery in my project.There were no errors.Versions are showing in package.json I have also added the bootstrap file path in angular.json file .But bootstrap themes are not working at all.
I followed this video to install bootsrap: https://www.youtube.com/watch?v=KaTtlGSJ0QE
the installation went well, but validation using http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css gave some errors in console.
angular.json:
"styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/jquery/dist/jquery.min.js" ]
html:
<div class="container-fluid "> <h1>Login</h1> <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="userName">User Name : </label> <input formControlName="userName" type="text" class="form-control" > </div> <div class="form-group"> <label for="password">Password : </label> <input formControlName="password" type="password" class="form-control" > </div> <button class="btn btn-primary" type="submit" >Login</button> </form> {{loginForm.value | json}} </div>
The o/p does not contain any bootstrap stylisation as expected.
-
Joel Joseph over 4 yearsafter
npm install bootstrap --save
just import the bootstrap css to your mainstyle.css
orstyle.scss
for example instyle.scss
add the following@import 'bootstrap/dist/css/bootstrap.min.css';
also its better not to use jquery with angular go for something likengx-bootstrap
as an alternative -
Billu over 2 yearsafter bootstrap installation and its configuration, you just need to run Angular App again using "ng serve" command.
-
-
Amal Raj over 4 yearsI changed the order and removed '/' before node_modules, but still not working.While verifying with the url it shows error in console:cannot match any roots.
-
Amal Raj over 4 yearsI changed the order and removed '/' before node_modules, but still not working.While verifying with the code using "localhost:4200/node_modules/bootstrap/dist/css/…" it shows error in console:cannot match any roots.
-
robert over 4 years@AmalRaj try restarting the ng serve, also verify bootstrap with a very simple markup like this:
<button type="button" class="btn btn-primary">Primary</button>
-
nevzatopcu over 4 yearsIt is normal. You cannot reach it like that. When you change something on angular.json file, preview will not refresh automatically. Did you restart your "ng serve"? If anyway it will not work, can you please provide your package.json file.
-
Amal Raj over 4 yearsI restarted ,still not working even with single button.
-
nevzatopcu over 4 yearsCan you provide your package.json? Is bootstrap imported? Which version you are using?
-
Amal Raj over 4 yearsI tried adding ':@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ' in styles.css and its working
-
Amal Raj over 4 yearsI tried adding ':@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ' in styles.css and its working
-
Amal Raj over 4 yearsdependensies: "bootstrap": "^3.4.1", "jquery": "^3.4.1", is showing in package.json
-
Amal Raj over 4 yearsother dependencies: "@angular/animations": "~8.1.0", "@angular/common": "~8.1.0", "@angular/compiler": "~8.1.0", "@angular/core": "~8.1.0", "@angular/forms": "~8.1.0", "@angular/platform-browser": "~8.1.0", "@angular/platform-browser-dynamic": "~8.1.0", "@angular/router": "~8.1.0", "bootstrap": "^3.4.1", "jquery": "^3.4.1", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1"
-
nevzatopcu over 4 yearsI did not understand why it didnt work while you import it on angular.json but anyway you are welcome.
-
robert over 4 years@AmalRaj can you clone this repo from github and give it a try. It should display a button with default bootstrap styles.
-
FrankelStein over 3 yearsWorked like magic ! thanx ! I still don't understand why inverting bootstrap.js and jquery.js solves the problem.
-
robert over 3 years@FrankelStein because bootstrap depends on jQuery. If there is a dependency then always that comes before. Note that newest bootstrap version 5 does not depend anymore on jQuery.
-
Admin over 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.