1

I ran "ng new" to create a new application and chose SCSS as the styling option. I donwnloaded bootstrap which comes in .css format only (I believe) and the application is not recognizing any bootstrap styling. Is it that Angular requires a bootstrap scss file? How do I solve this?

angular.json:

"styles": [
          "src/styles.scss",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "./node_modules/font-awesome/css/font-awesome.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js"
        ]
koque
  • 1,830
  • 5
  • 28
  • 49
  • Just to be sure, did you kill your `ng serve` process and restart it again? When you are doing changes in the `angular.json`, it isn't applied until you have restarted your dev server. – Efe Jun 08 '19 at 16:06

5 Answers5

2

After adding a bootstrap file in Angular.Json, You need to rerun the project .After that only the changes applies in the project.If this still not working then try to import bootstrap css files in projects styles.scss file.

import 'node_modules/bootstrap/dist/css/bootstrap.min.css'

This should work. I hope this method may solve your problem :)

Arjun
  • 1,294
  • 13
  • 24
  • 1
    The import worked. Don't know why it is not working in angular.json, this is my first download of Angular 8, maybe there are compatibility issues. – koque Jun 08 '19 at 17:49
  • 1
    I am not sure but Angular 8s stable release just launched 4 days ago. I think there still might be some bugs. Maybe because of that you are facing this issue.I would suggest using Angular 7 if Angular version is not bothering in your project – Arjun Jun 08 '19 at 17:54
1

I've generated a new app the same way that you've describe using:

  • ng new 'app name'
  • selected routing
  • selected scss

Then installed bootstrap using npm install bootstrap --save and npm install font-awesome --save. After that I copied what you have for the style which looks like 

"styles": [
  "src/styles.scss",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "./node_modules/font-awesome/css/font-awesome.css"
]

Are you sure your node_modules folder is in the same directory as your angular.json file?

AlmaniaM
  • 217
  • 2
  • 5
  • Yes i am sure. Thanks for the effort though, maybe the problem is other than having to do with bootstrap. – koque Jun 08 '19 at 17:08
0

Remove ./ and keep only node_modules/bootstrap/.... and try

Nitin Daddikar
  • 335
  • 5
  • 12
0

You may want to use a wrapper library such as ngx-bootstrap or ng-bootstrap when using bootstrap in Angular.

These wrapper libraries are made so you don't need to use jquery to perform certain actions, such as opening modals, triggering alerts, etc.

Using jquery is discouraged in Angular and may hinder performance, you may search up on this if you wish to find out more.

The installation instructions for ngx-bootstrap can be found at https://valor-software.com/ngx-bootstrap/#/documentation#getting-started and for ng-bootstrap https://ng-bootstrap.github.io/#/getting-started

To decide which of the 2 libs to choose, someone had posted a question before on stackoverflow: What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

Hope this helped!

terahertz
  • 2,915
  • 1
  • 21
  • 33
0

I had the same error. I noticed, that the angular.json file has two styles tags.

I think one is for the project and the other for test.

try to search styles in angular.json and you will find two too.

I put them both like this:

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

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

and that's how it was solved ;)

Emiliano Almasia
  • 1
  • 1