ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9

ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9

This tutorial guides you on how to resolve ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css in Angular 9. When you create a new project and setup bootstrap you end up with following error after running ng serve.

ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9

After creating new project using ng new PROJECT command, then I tried installing Bootstrap which resulted with following error.

ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve 'C:\Users990\Documents\Workspaces\Angular\sneppets\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'C:\Users990\Documents\Workspaces\Angular\sneppets\angular-app'

First, I had installed Bootstrap CSS framework using the following command.

> npm install --save [email protected]

Later, I tried adding Bootstrap to the styles[] array section in the angular.json file  as shown below.

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

As mentioned in many tutorials I tried including with leading ../, but it did not work for me in Angular 9 as shown below. It result with ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css as mentioned above. In the error you could clearly make out the required path.

ERROR in multi /bootstrap.min.css ./src/styles.css in Angular 9

Solved: ERROR in multi /bootstrap.min.css ./src/styles.css

Here is the way, how I resolved that error by modifying the styles[] array in the angular.json file.

"styles": [
  {"input":"./node_modules/bootstrap/dist/css/bootstrap.min.css"},              
  "src/styles.css"
 ],
"scripts": []

In Angular 9 the above way of adding Bootstrap to styles[] array worked for me and the error gone away as shown below. This fixed ERROR in multi /bootstrap.min.css ./src/styles.css.

C:\Users990\Documents\Workspaces\Angular\sneppets\angular-app>ng serve

chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 765 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-08-31T14:10:44.149Z - Hash: 6f552d319efa71532d53 - Time: 6105ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

if it still did not work for you just need to look at your path and correct the Bootstrap path accordingly to get rid of this error.

That’s it. Hope it helped 🙂

Also See:

References:

Leave a Reply

avatar
  Subscribe  
Notify of