3

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

Improve this question
7
  • Without the @import statements, were you getting any errors in the dev console in your browser and if so, what were they? Commented Jul 12, 2017 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. Commented Jul 12, 2017 at 21:27
  • 1
    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 and nothing to do with angular. Commented Jul 12, 2017 at 22:26
  • @peinearydevelopment This project does not have a src directory. Any advice on this? Commented Jul 14, 2017 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. Commented Jul 14, 2017 at 20:16

2 Answers 2

Reset to default
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 [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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Also helpful: github.com/angular/angular-cli/wiki/stories-include-bootstrap
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
What version of Asp.Net are you using? Are you using just WebApi or MVC as well?
.Net 4.5.2 I think it was just web api but when i look at the web.config I see <dependentAssembly> <assemblyIdentity name="System.Web.Mvc" I know there are a lot of commonalities between MVC and web api, but I don't remember setting up the project as MVC at all
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 localhost:4325/dist/index.html. You are still missing WAY too many details from your question to get the answer you need.
|
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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.