CODEWITHSUNDEEP
csstwitter-bootstrapangularbootstrap-4ng-bootstrap
Goku
Goku

Reputation: 1663

Installed ng-bootstrap CSS in Angular 4 project, but it doesn't seem to be working

I am looking for advice on how to debug this problem. I installed bootstrap like this:

npm install --save [email protected]

then ng-bootstrap like this:

npm install --save @ng-bootstrap/ng-bootstrap [email protected] font-awesome

I added this to my app.module.ts:

import { NgbModule }      from '@ng-bootstrap/ng-bootstrap';

imports: [
    BrowserModule, 
    FormsModule,
    HttpModule,
    AppRoutingModule,
    NgbModule.forRoot()
  ],

then i added this to my angular-cli.json (i even included the js scrips but this should not be required)

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/tether/dist/js/tether.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"

I can tell that none of this is working since something as simple as this doesn't even show the right result:

<table class="table-striped">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

I am using a .Net web API backend with an angular 4 frontend, and I used npm to install all of the angular4, bootstrap, ng-bootstrap, and Font Awesome stuff.

UPDATE: So I seem to have fixed the problem but I am still looking for why this change fixed it. I added these two lines to the sytles.css class:

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/font-awesome/css/font-awesome.min.css";

and commented out a few lines from the angular-cli.json so that the file looks like this:

"styles": [
    //"../node_modules/bootstrap/dist/css/bootstrap.min.css",
    //"../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.<%= styleExt %>"
    //"styles.css"
  ],
  "scripts": [
    //"../node_modules/jquery/dist/jquery.min.js",
    //"../node_modules/tether/dist/js/tether.min.js",
    //"../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Can anyone explain why putting the import statements in the styles.css worked, but having references to the same files in the angular-cli.json didn't? the tutorials I was following all showed the references in the angular-cli.json and not the styles.css, so this solution i found seems strange to me...

Here is a screenshot of my project project directory

Upvotes: 3

Views: 4256

Answers (2)

Rohit Khanna
Rohit Khanna

Reputation: 723

The issue was the Bootstrap CSS was not applied automatically by just Installing them through NPM.

I faced the same problem and after going through the above two solutions i figured out that both solutions are trying to make the bootstrap css available to the project. What @peinearydevelopment did, was to include it as part of cli.json file (restart server is reqjuired) while what @adam did was to manually invoke their availability in styles.css file. (restart server not required)

Thanks both for the above answers as they both are correct and i tried them both.

Cheers

Upvotes: 0

peinearydevelopment
peinearydevelopment

Reputation: 11474

You really need to show more information in your question. These are the steps I followed and it worked just fine for me.

npm install --save @ng-bootstrap/ng-bootstrap [email protected] font-awesome

Upon running this command I saw a warning in the console about unmet dependencies. I don't believe this is relevant if you just want to include the css files as your question seems to indicate, but I'm including it for completeness.

To fix the unmet dependencies, I ran npm install --save @angular/core@^4.0.3 @angular/common@^4.0.3 @angular/forms@^4.0.3 @angular/[email protected] rxjs@^5.0.1 zone.js@^0.8.4

With that taken care of, I tried to update my src/app/app.module.ts file to look more like what you had, but wasn't sure where AppRoutingModule was being imported from. Again, I believe none of these modules need to be imported if you just want the css from bootstrap, but since you had them I tried to add them for consistency.

All I had to do at this point was update the .angular-cli.json file. I added: "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css" to the styles array under the "styles.css" entry. I then launched the app with ng run start, loaded it in the browser and saw the styles applied. If you actually want to utilize one of the Modules that package provides, please provide more details.

Upvotes: 3

Related Questions