install bootstrap on angular project

Question

Hi i hav latest angular cli in my machine. i have tried to install bootstrap on angular project. These are the steps i have followed .

ng new Demo
npm install bootstrap jquery --save
Then open the project in vs codein the angular.json file i copy below code.

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ]

after that i run the project ng serve i got this error msg.

Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ ** 91% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'D:\Angular\node_modules\jquery\dist\jquery.min.js'

Have you tried building the app and running the serve command again? — Prachi
– Prachi, Commented May 10, 2018 at 17:52
I think the path you provided is wrong angular.json present in root of your project worksapce... So path you provided should be "./node_modules/jquery/dist/jquery.min.js" instead of "../node_modules/jquery/dist/jquery.min.js" & same applicable to all other scripts in angular.json file — Abinesh Devadas
– Abinesh Devadas, Commented May 10, 2018 at 17:53
Thanks a lot Abinesh it is working . but glyphicon icons doesn't show — Lewis
– Lewis, Commented May 11, 2018 at 1:34

Vikas · Accepted Answer · 2018-05-11 03:17:54Z

3

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": {}
  },
}

In your angular.json add the file paths to the styles and scripts array in under build target with ./ instead of ../

Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead:
Execute npm install --save font-awesome and addd file path to the styles array

 "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"
               "./node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": ["./node_modules/jquery/dist/jquery.min.js",
                       "./node_modules/bootstrap/dist/js/bootstrap.min.js"]
          },

edited May 11, 2018 at 3:17

answered May 10, 2018 at 19:12

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lewis Over a year ago

Thanks a lot Vikas error has gone . but glyphicon icons doesn't show

Vikas Over a year ago

@Lewis I have updated my answer accordingly, do Mark and upvote if it helped

Lewis Over a year ago

Done .but can't upvote. Because my reputation is less than 15.

tdy · Accepted Answer · 2021-11-20 01:31:06Z

0

Place your command line on your project, then run:

npm install bootstrap@next

Then, go your ide go to Angular.json and type at styles:

"styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" ]

Do the same for the scripts:

"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

edited Nov 20, 2021 at 1:31

tdy

42.1k42 gold badges124 silver badges125 bronze badges

answered Nov 19, 2021 at 22:20

Luis Lopez

111 bronze badge

Collectives™ on Stack Overflow

install bootstrap on angular project

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related