angular2-cli gives @multi styles error

Question

I started using angular2-cli recently and created a new project. I wanted to use bootstrap in my project hence I installed bootstrap and then wanted to import the bootstrap css file like it is shown in the the angular2-cli guide here. https://github.com/angular/angular-cli#global-library-installation After running ng serve I get the following error.

ERROR in multi styles Module not found: Error: Can't resolve '/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css' in '/home/krishna/angular2_migrate/webui/node_modules/angular-cli/models' @ multi styles

What am I doing wrong ?

Information about angular2-cli version

krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64

Answer 1

I am using Angular 6 so my filename is angular.json, but I was able to resolve the similar issue by removing the "../" path that it was asking for. Below is my setup for adding bootstrap and jquery to my angular app.

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

Note: for jquery i needed the "../" while bootstap did not require it.

Alternate based on issues I had:

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

Also, this article holds multiple alternate options on setting it .

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

Answer 2

here is the fix for me. in you current directory you have a hidden file called .angular-cli.json open that and change the "style.sass" to "style.css: run ng build and you are done.

BEFORE: AFTER:

Answer 3

You just need to add the below mentioned code in style.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

Hope it helps

Answer 4

In file angular.json , I changed styles.sass to styles.scss .

I build successfully

that is navigate to src folder and see the extension of styles file

change it accordingly in angular.json styles object

Answer 5

The solution below worked for me, as it seems there is a bug in bootstrap 4.0:

npm uninstall bootstrap --save

then install

npm install bootstrap@3.3.7 --save

Answer 6

I had same problem but I solve that issue by giving full path of the file like below "styles": [ "F:/Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F:/Angular2Projects/Angular/my-app/src/styles.css" ],