Menu
I have tried to add styles dependency in angular.json package but showing that the module not found. adding two of the bootstrap files. here is the screenshot of both the files
the angular.json file is like this angular.json file
739
Under the folder, copy the extracted files downloaded from bootstrap. Under the head tag of the HTML file, the CSS needs to be linked. The jQuery downloaded should also be copied under the JS file. Make sure that under the project file, the downloaded files and HTML page must be present in that folder.
If you are adding the bootstrap path into the angular. json file, make sure it is the styles within the project\architect\build. Not the one in the project\architect\test.
afterwards, inside angular.json (previously .angular-cli.json) inside the project's root folder, find styles and add the bootstrap css file like this: Show activity on this post. and add relevent files into angular.json file under the style property for css files and under scripts for JS files.
Bootstrap 4 is the newest version of Bootstrap, the world’s most popular front-end component library to build responsive, mobile-first projects on the web. Angular 6 is the newest version of Angular. A combination of both will make an application fast, visually appealing and modern.
ng-bootstrap It contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript Show activity on this post.
Now, open the integrated terminal by pressing Ctrl + and ~,and add the following command to add Bootstarp in this project, Now open node_modules folder and check that the Bootstrap folder is created, Now open styles.css file and add Bootstrap file reference. We can also add Bootstrap file reference into angular.json file.
Configuration
The styles and scripts options in your angular.json configuration now allow to reference a package directly:
before: "styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
after: "styles": ["bootstrap/dist/css/bootstrap.css"]
"builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/ng6", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css","bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "jquery/dist/jquery.min.js", "bootstrap/dist/js/bootstrap.min.js" ] }, Angular v6 Onwards
CLI projects in angular 6 onwards will be using angular.json instead of .angular-cli.json for build and project configuration.
Each CLI workspace has projects, each project has targets, and each target can have configurations.Docs
. { "projects": { "my-project-name": { "projectType": "application", "architect": { "build": { "configurations": { "production": {}, "demo": {}, "staging": {}, } }, "serve": {}, "extract-i18n": {}, "test": {}, } }, "my-project-name-e2e": {} }, } OPTION-1
execute npm install bootstrap@4 jquery --save
The JavaScript parts of Bootstrap are dependent on jQuery. So you need the jQuery JavaScript library file too.
In your angular.json add the file paths to the styles and scripts array in under build target
NOTE: Before v6 the Angular CLI project configuration was stored in <PATH_TO_PROJECT>/.angular-cli.json. As of v6 the location of the file changed to angular.json. Since there is no longer a leading dot, the file is no longer hidden by default and is on the same level.
which also means that file paths in angular.json should not contain leading dots and slash
i.e you can provide an absolute path instead of a relative path
In .angular-cli.json file Path was "../node_modules/"
In angular.json it is "node_modules/"
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/ng6", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"] }, OPTION 2
Add files from CDN (Content Delivery Network) to your project CDN LINK
Open file src/index.html and insert
the <link> element at the end of the head section to include the Bootstrap CSS file
a <script> element to include jQuery at the bottom of the body section
a <script> element to include Popper.js at the bottom of the body section
a <script> element to include the Bootstrap JavaScript file at the bottom of the body section
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Angular</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/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <app-root>Loading...</app-root> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> OPTION 3
Execute npm install bootstrap
In src/styles.css add the following line:
@import "~bootstrap/dist/css/bootstrap.css";
OPTION-4
ng-bootstrap It contains a set of native Angular directives based on Bootstrap’s markup and CSS. As a result, it's not dependent on jQuery or Bootstrap’s JavaScript
npm install --save @ng-bootstrap/ng-bootstrap After Installation import it in your root module and register it in @NgModule imports` array
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] }) NOTEng-bootstrap requires Bootstrap's 4 css to be added in your project. you need to Install it explicitly via:npm install bootstrap@4 --save In your angular.json add the file paths to the styles array in under build target
"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
answered Sep 28 '22 02:09
npm install --save bootstrap afterwards, inside angular.json (previously .angular-cli.json) inside the project's root folder, find styles and add the bootstrap css file like this:
for angular 6
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], for angular 7
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
