36

app.component.html

index.html

app.component.ts

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

yivi
  • 42,438
  • 18
  • 116
  • 138
Nikhil S
  • 3,786
  • 4
  • 18
  • 32
  • 1
    Show us what you have tried. – Dimitar Tsonev May 11 '18 at 10:59
  • @Phil I doubt it's not duplicate OP is unaware of the angular version he is using, he has mentioned about `angular.json` file which is used in angular 6 – Vikas May 11 '18 at 14:09
  • @phil no i am using angular 2 only in it also the previous angular-cli.json file is renamed as angular.json . – Nikhil S May 11 '18 at 16:37
  • @Phil after adding jquery library and compiled java script and importing bootstrap.min.css in app.component.css its bootstraping but the container class is not working – Nikhil S May 11 '18 at 16:43
  • but the ng version (angular cli )shows it to be 6.0.0 – Nikhil S May 11 '18 at 17:31
  • @nikhilsugandh You are not supposed to import it in app.component.css; you are supposed to import it in assets/style.css or assets/styles.scss (depending on whether you use sass or not) – Phil May 11 '18 at 18:22
  • @phil though i dont have style.css in asset i created one its ok ??? – Nikhil S May 11 '18 at 18:42
  • @nikhilsugandh as long as you have `"styles": ["assets/styles.css"]` in your angular.json – Phil May 11 '18 at 19:14
  • This is not a duplicate as the compared questions is about Angular 2, whereas this questions is for Angular 6 and the correct response is slightly different due to changes in versions and best practices to apply css styles. – Gi1ber7 Jul 11 '18 at 18:51
  • Voted to reopen this question. It is not a duplicate as Angular 2 and 6 are very different beasts. – theMayer Jul 14 '18 at 21:48

4 Answers4

148

For Angular Version 11+

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 Version 10 and below

You are using Angular v6 not 2

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]
})

NOTE
ng-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"
   ],

P.S Do Restart Your server

`ng serve || npm start`
Vikas
  • 11,859
  • 7
  • 45
  • 69
  • the simple bootstrap is working but the container class bootstrap isnt – Nikhil S May 12 '18 at 11:55
  • That should not be the case create a stackblitz without code i cant' help you – Vikas May 12 '18 at 12:00
  • you have already added bootstrap in your `angular.json` the links and script in your `index.html` is redundant and see if it works – Vikas May 12 '18 at 12:56
  • I checked alternatively changing in angular.json does not implement bootstrap but the three tags in index.html worked perfectly. – Nikhil S May 15 '18 at 11:48
  • My issue was the leading './' it's a simple step to miss – Braden Brown Jul 20 '18 at 00:06
  • 3
    Don't forget to re-start 'ng serve' – Mark Aug 08 '18 at 10:20
  • First install bootstrap in project directory `npm install bootstrap`. If you look at the Angular.JSON file you will see that styles.css is already referenced so in styles.css just add `@import "~bootstrap/dist/css/bootstrap.css";` – skydev Oct 08 '18 at 09:46
  • @skydev what about the features of `bootstrap` which are dependent on `jquery` and `javascript` Those have to be added in `scripts` array – Vikas Oct 08 '18 at 10:44
  • @Vikas that's what ng-bootstrap and ngx-bootstrap take care of. You do not need jquery. – Seiyria Jan 06 '19 at 23:14
  • @Seiyria have i not mentioned the same in the answer? – Vikas Jan 07 '19 at 04:36
  • @Vikas it should not even be part of the answer. – Seiyria Jan 07 '19 at 15:51
  • @Seiyria I disagree Since it's community-wide accepted and it also includes the alternative to bootstrap I would not alter it. :) – Vikas Jan 07 '19 at 17:25
  • 5
    @Vikas you're welcome to disagree, but no angular2+ solution involving jQuery is "community-wide" accepted. jQuery greatly interferes with how angular2+ handles the DOM and causes more headaches than not. – Seiyria Jan 07 '19 at 19:35
  • You can now use: ng add @ng-bootstrap/schematics From the ng workspace folder, this will add ng-bootstrap which does not require jquery and popper, even tough you get a working saying they are missing. The team that works on ng-bootstrap tries to keep the same browser compatibility, this is the easiest way (my opinion) so far. – Norcino Feb 08 '19 at 17:33
  • option 3 works for me – Kamil Naja Feb 15 '19 at 21:41
  • @KamilNaja exactly, **option 3** works fine me too even without restarting the server BUT the **option** 1 requires server **restart** (`ng s`) before it works. :) – John Erbynn Jun 14 '20 at 10:58
11
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"
],
Community
  • 1
  • 1
jayant mishra
  • 686
  • 5
  • 13
6
npm install bootstrap --save

and add relevent files into angular.json file under the style property for css files and under scripts for JS files.

 "styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
   ....
]
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
  • is `--save` still required? I guess i somewhere read that it is not required if you're using npm > v5. – AD8 Jun 13 '18 at 10:21
  • 1
    Nope, you still need to add `--save` in order to update `.package.json` as per my knowledge – Pardeep Jain Jun 13 '18 at 10:23
  • if all that `--save` does is add a dependency to `package.json` then I can confirm it is not required if using npm v5.6.0. Just confirmed that on test angular project. :-) – AD8 Jun 13 '18 at 10:25
  • Ohh that is great if so, haven't tried yet !! – Pardeep Jain Jun 13 '18 at 10:26
  • 1
    yeah, but other options like `--save-dev` and the other one for optional dependency would still require explicit flag. – AD8 Jun 13 '18 at 10:28
  • Can you please provide any documentation for the same? – Pardeep Jain Jun 13 '18 at 11:28
  • If you go `npm install -h`, and check the bottom section of the help, common options listed there are`--save-prod | --save-dev | --save-optional` on top of this, there is `--no-save`, i assume `--no-save` would prevent the default behavior of adding package to `package.json`. – AD8 Jun 13 '18 at 22:57
  • jquery is required? – Sunil Garg Apr 13 '20 at 13:49
  • @SunilGarg its upto your requirement. PS: As per community using jQuery with angular is not a recommended approach. – Pardeep Jain Apr 15 '20 at 10:09
  • @PardeepJain, yes its not recommended, thats why i asked is jquery is required to use bootstrap? – Sunil Garg Apr 15 '20 at 11:11
  • no, its not required you can use standalone UI file of the bootstrap as well, but some of the bootstrap widget requires JQuery in use internally so keep in mind if you are using any of them. – Pardeep Jain Apr 15 '20 at 12:46
3

using command 

npm install bootstrap --save

open .angular.json old (.angular-cli.json ) file find the "styles" add the bootstrap css file

"styles": [
       "src/styles.scss",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
lpd
  • 165
  • 10