Angular-cli: Bootstrap styles not loading

[faizy6641]

Hi,

I followed the steps for Global Library Installation https://github.com/angular/angular-cli#global-library-installation

First I installed Bootstrap from npm by executing below command

npm install jquery --save
npm install popper.js --save
npm install bootstrap@next --save

Then i added the needed script files to apps[0].scripts:
"scripts": [
"../node_modules/jquery/dist/jquery.slim.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
then Restarted ng serve and getting below error:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
at error (C:\Users\faiyazsDownloads\practice\node_modules\browserslist\index.js:37:11)
at Function.browserslist.checkName (C:\Users\faiyazsDownloads\practice\node_modules\browserslist\index.js:320:18)
at Function.select (C:\Users\faiyazsDownloads\practice\node_modules\browserslist\index.js:438:37)
at C:\Users\faiyazsDownloads\practice\node_modules\browserslist\index.js:207:41
at Array.forEach ()
at browserslist (C:\Users\faiyazsDownloads\practice\node_modules\browserslist\index.js:196:13)
at Browsers.parse (C:\Users\faiyazsDownloads\practice\node_modules\autoprefixer\lib\browsers.js:44:14)
at new Browsers (C:\Users\faiyazsDownloads\practice\node_modules\autoprefixer\lib\browsers.js:39:28)
at loadPrefixes (C:\Users\faiyazsDownloads\practice\node_modules\autoprefixer\lib\autoprefixer.js:56:18)
at plugin (C:\Users\faiyazsDownloads\practice\node_modules\autoprefixer\lib\autoprefixer.js:62:18)
at LazyResult.run (C:\Users\faiyazsDownloads\practice\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:270:20)
at LazyResult.asyncTick (C:\Users\faiyazsDownloads\practice\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:185:32)
at LazyResult.asyncTick (C:\Users\faiyazsDownloads\practice\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:197:22)
at processing.Promise.then._this2.processed (C:\Users\faiyazsDownloads\practice\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:224:20)
at new Promise ()
at LazyResult.async (C:\Users\faiyazsDownloads\practice\node_modules\postcss-loader\node_modules\postcss\lib\lazy-result.js:221:27)
@ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-127
@ multi ./node_modules/bootstrap/dist/css/bootstrap.css ./src/styles.css

Details:
package.json:
"@angular/router": "^5.0.0",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"jquery": "^3.3.1",
"popper.js": "^1.12.9

OS- Windows 7 Enterprise
Angular CLI: 1.6.2
Node: 8.9.4
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

someone pls help me i am stuck at this point from past 2 weeks

[athulreji]

I think it is because of the problem with bootstrap, try this:
Step 1.
Inside .angular-cli.json file

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

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2.
Go to styles.css

Import bootstrap by adding this line
@import "~bootstrap/dist/css/bootstrap.css";

These steps solved the errors I got during the building process.

[clydin]

This is a duplicate of #9020 and fixed in v1.7

[sasidharv]

The above solution worked for me

[manojjha]

I've tried everything as above, still i am getting error.
what can i do now?

[rahulteja5555]

I think it is because of the problem with bootstrap, try this:
Step 1.
Inside .angular-cli.json file

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

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2.
Go to styles.css

Import bootstrap by adding this line
@import "~bootstrap/dist/css/bootstrap.css";

These steps solved the errors I got during the building process.

This worked for me
but, not in .angular-cli.json
in angular.json
:100: :+1:

[JanCarlosRamirezM]

Hola, la solución a este error es la siguiente:
"styles": [ "src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Esto funcionó para mí

[JanCarlosRamirezM]

He intentado todo lo anterior, todavía estoy recibiendo error.
¿Qué puedo hacer ahora?

Hola, la solución a este error es la siguiente:
"styles": ["src / styles.css",
"node_modules / bootstrap / dist / css / bootstrap.min.css"
],

Esto funcionó para mí

[abhash01]

I find it is because of the problem with bootstrap, try this:
Step 1.
Inside .angular-cli.json file

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

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2.
Go to styles.css

Import bootstrap by adding this line
@import https://github.com/import "~bootstrap/dist/css/bootstrap.css";

These steps solved the errors I got during the building process.
Thanks and Regards
Abhash Kumar Ranjan
8800945318
8317510954

On Sat, Oct 13, 2018 at 6:48 PM Ing. Jan Carlos Ramirez M. <
[email protected]> wrote:

He intentado todo lo anterior, todavía estoy recibiendo error.
¿Qué puedo hacer ahora?

Hola, la solución a este error es la siguiente:
"styles": ["src / styles.css",
"node_modules / bootstrap / dist / css / bootstrap.min.css"
],

Esto funcionó para mí

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/9690#issuecomment-429541187,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AfU60yz4NM2pEr8uWH3XkTe-VZ-ACMz7ks5ukegrgaJpZM4SLOa7
.

[habibatou]

merci beaucoup g puis utiliser le fichier angular.json pour y mettre "styles": ["styles.css"] et le fichier style.scss pour y mettre @import "~bootstrap/dist/css/bootstrap.css";

[muhammadshahidraficp]

Problem solved using
@import "~bootstrap/dist/css/bootstrap.css"; in style.css

but what the real issue with below code
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

[muhammadshahidraficp]

Problem solved using

@import "~bootstrap/dist/css/bootstrap.css"; in style.css

but what the real issue with below code in angular.json

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

[aman-jft]

Path should not have "_../_". It should be simply _node_modules/bootstrap/dist/css/bootstrap.min.css_. Check src/style.css path, it means relative path is from your project home folder.

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

[dreadfear]

@aman-jft i doing

Path should not have "_../_". It should be simply _node_modules/bootstrap/dist/css/bootstrap.min.css_. Check src/style.css path, it means relative path is from your project home folder.

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

I have to restart the server and it works how silly I am. thanks for answer

[leolelover93]

Path should not have "_../_". It should be simply _node_modules/bootstrap/dist/css/bootstrap.min.css_. Check src/style.css path, it means relative path is from your project home folder.

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

Thank you for your answer sir

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}