How to use Bootstrap JavaScript Components with ngx-bootstrap in Angular 7?

Question

I am trying to add Bootstrap Javascript to my Angular 7 app using this tutorial as a guide.

I ran npm install bootstrap ngx-bootstrap --save

Updated my angular.json like so:

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

Here is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And here is my app.component.html:

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand">
            <img src="assets/img/ngx-bootstrap.svg" class="logo">
          </a>
          <span class="navbar-brand">Angular + Bootstrap</span>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">
            Link <span class="sr-only">(current)</span>
          </a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown" dropdown> <!-- {1} -->
              <a dropdownToggle role="button"> <!-- {2} -->
                Dropdown <span class="caret"></span></a>
              <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
              </ul>
          </li>
      </ul>
  </div>
</nav>

The navbar is displaying as a standard navbar, with no Bootstrap styling appearing.

I've proved the Bootstrap styling is installed as I'm able to use the 'card' class on a different div on the page.

Can someone please tell me what I'm missing so that my navbar is working with Bootstrap & JavaScript? Thanks a lot in advance

Answer 1

Check, that bootstrap installed to your node_modules dir, if so - this configuration will be enough:

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