Bootstrap NavBar not working in .Net Core Angular SPA template

Question

I've installed the dotnet SPA templates using:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

Then I created a new Angular application using:

dotnet new angular

Upon restoring packages, building, and running, I noticed something weird with the template's navbar. Picture. The navbar was setup on the side of the page instead of being a normal top navigation bar. My desire is a fixed top nav-bar.

In app.component.html, the navbar and router outlet were configred as following:

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Obviously, I thought the problem was that the nav-menu was within col-sm-3 and the router-outlet was within col-sm-9. I changed it around so that the nav-menu was in its own row with a full width column, and same with the router-outlet:

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-12'>
            <nav-menu></nav-menu>
        </div>
    </div>
    <div class="row">
        <div class='col-sm-12 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

However, this did not fix the problem. Instead, the navmenu remained on the side of the screen, and covered up the rest of my content. Picture.

I tried various other configurations of the HTML in app.component.html with no success for getting the navbar working.

Here is the navbar html:

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]="['/home']">Brand</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/counter']">
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

I haven't touched anything else in the project, so recreating this issue should be extremely easy in Visual Studio if you would like to give it a try...

Any ideas on getting a working, top-fixed navbar in this project template?

Answer 1

In boot-client.ts add import 'bootstrap';

And run the webpack