use bootstrap 3 in angular 6

Question

how i can use bootstrab 3 in angular 6 ?? it's not work in any way , i used :

npm install bootstrap@3 jquery --save

then update angular.json as follow :

"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"
        ]

in html bootstrap class appear , but it dosen't work !! it's git this error

91% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'E:\node_modules\jquery\dist\jquery.min.js'

path to node modules may be wrong , i think it should "../node_modules" — Naga Sai A, May 16 '18 at 21:27
https://stackblitz.com/edit/angular-oyxshp?file=src/index.html for reference — Naga Sai A, May 16 '18 at 21:27

Arun · Answer 1 · 2020-04-24T14:44:03.960

INSTALL BOOTSTRAP (All bootstrap installed in node_module folder)

npm install bootstrap@3 jquery --save

Angular.json file

Add styles and scripts file to Angular.json for globalise

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

component.html

<a class="btn btn-lg btn-primary" href="" role="button">View</a>

score 0 · Answer 2 · answered May 16 '18 at 21:29

0

To achieve expected result, update your node_modules location as below

"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"
            ]

code sample - https://stackblitz.com/edit/angular-oyxshp?file=angular.json

answered May 16 '18 at 21:29

Naga Sai A

10,771
1
21
40

its still git this error : 91% additional asset processing scripts-webpack-plugin× ｢wdm｣: Error: ENOENT: no such file or directory, open 'E:\node_modules\jquery\dist\jquery.min.js' – ammar ammary May 16 '18 at 21:32
any other console errors apart form the above and also could you share errors before from console – Naga Sai A May 16 '18 at 21:37
any luck @ammarammary – Naga Sai A May 18 '18 at 21:18

score 0 · Answer 3 · answered May 30 '18 at 18:41

i solve it

"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"
            ]

use bootstrap 3 in angular 6

3 Answers3

Linked