NullInjectorError: StaticInjectorError (BootModule) [BsDropdownDirective -> AnimationBuilder]: NullInjectorError: Нет поставщика для AnimationBuilder

Question

Я работаю с angular 8 и версией 5.3.2 ngx- bootstrap, я бы реализовал панель навигации, но у меня была проблема "NullInjectorError: StaticInjectorError (BootModule)" для каждого ngx- Добавлен модуль bootstrap

app.component. html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" [collapse]=isCollapsed>
      <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>
 <a href="#" dropdownToggle class="dropdown-toggle">Dropdown <span class="caret"></span></a>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
               <li class="dropdown" dropdown>
 <a href="#" dropdownToggle class="dropdown-toggle">Dropdown <span class="caret"></span></a>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</li>
      </ul>
    </div>
  </div>
</nav>

app.component.ts

isCollapsed = true;

и app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { CommonModule } from '@angular/common';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { CollapseModule, BsDropdownModule } from 'ngx-bootstrap';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbAccordionModule,
    CollapseModule.forRoot(),
    BsDropdownModule.forRoot()
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

1. Импорт модуля BrowserAnimations и BrowserModule в AppModule.
2. А также используйте общий модуль для импорта CommonModule. Создайте новый модуль, как показано ниже.

shared.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [CommonModule],
  exports: [CommonModule],
  declarations: []
})
export class SharedModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
import { CollapseModule, BsDropdownModule } from 'ngx-bootstrap';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    NgbAccordionModule,
    CollapseModule.forRoot(),
    BsDropdownModule.forRoot(),
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}