3

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

npm install --save bootstrap@4.0.0-alpha.6

then ng-bootstrap like this:

npm install --save @ng-bootstrap/ng-bootstrap bootstrap@4.0.0-alpha.6 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

Goku
  • 1,565
  • 1
  • 29
  • 62
  • Without the @import statements, were you getting any errors in the dev console in your browser and if so, what were they? – peinearydevelopment Jul 12 '17 at 21:13
  • @peinearydevelopment nope, In fact, when i comment out the entire anglular-cli.json file i got no errors and everything worked fine. It's almost like the angular-cli.json is not being looked at. – Goku Jul 12 '17 at 21:27
  • My guess is that after updating the angular-cli.json file, you didn't run `npm run build`. If you did, then you should be able to open up your dist/styles.bundle.js file and see a reference to bootstrap/dist/css/bootstrap.min.css. If you didn't, then the import is working through [css imports](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) and nothing to do with angular. – peinearydevelopment Jul 12 '17 at 22:26
  • @peinearydevelopment This project does not have a src directory. Any advice on this? – Goku Jul 14 '17 at 20:10
  • Update your question with the structure of your directory or a screen shot of it. I've said many times that you need to provide much more information. – peinearydevelopment Jul 14 '17 at 20:16
  • Here it is. I'm wondering if the fact that it is a visual studio project rather than a node backedn has something to do with it? – Goku Jul 14 '17 at 20:35
  • please refer below link https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap – ravikumar533 Dec 14 '17 at 05:04

2 Answers2

3

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 bootstrap@4.0.0-alpha.6 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/platform-browser@4.2.6 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.

peinearydevelopment
  • 11,042
  • 5
  • 48
  • 76
  • 2
    Also helpful: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap – pkozlowski.opensource Jul 12 '17 at 19:20
  • Im not trying to utilize any other of the package modules yet, just trying to make sure ngbootstrap looks right on the frontend. One thing I noticed is that you said you launch by using ng run start. I am in a visual studio web api app so that part is slightly different. do you think this requires some other configuration that I am forgetting? something other than the angular-cli.json – Goku Jul 12 '17 at 19:30
  • What version of Asp.Net are you using? Are you using just WebApi or MVC as well? – peinearydevelopment Jul 12 '17 at 19:36
  • .Net 4.5.2 I think it was just web api but when i look at the web.config I see – Goku Jul 12 '17 at 19:57
  • So what is your folder structure like? Most likely IIS is trying to serve a 'default document', which could be any number of files, but index.html is one of them, which is what I assume you're using. If index.html is in the root of the website(same level as web.config), IIS should find it and serve it. If it is at any other level, then the easiest way to see it is to add that to your url, for instance http://localhost:4325/dist/index.html. You are still missing WAY too many details from your question to get the answer you need. – peinearydevelopment Jul 12 '17 at 20:22
  • ok. so I seemed to have fixed it but I'm hoping you can enlighten me on why. adding these two lines to styles.css seems to make the css part work, but what im confused about is that these were already in the angular-cli.json styles array... '@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";' '@import "../node_modules/font-awesome/css/font-awesome.min.css";' – Goku Jul 12 '17 at 20:43
  • Update your question with more info: previous full angular-cli.json that wasn't working and what it looks like now that it is working. I don't understand from your comments what has changed. – peinearydevelopment Jul 12 '17 at 20:59
0

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

Rohit Khanna
  • 693
  • 5
  • 15