NullInjectorError：StaticInjectorError（BootModule）[BsDropdownDirective -> AnimationBuilder]：NullInjectorError：没有AnimationBuilder的提供程序

Question

我正在使用 Angx-bootstrap 的 Angular 8 和 5.3.2 版本，我会实现一个导航栏，但是对于添加的每个 ngx-bootstrap 模块，我都遇到了“NullInjectorError: StaticInjectorError(BootModule)”问题

应用程序组件.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>

应用程序组件.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. 在AppModule中导入BrowserAnimationsModule和BrowserModule。
2. 并且还使用共享模块导入“CommonModule”。创建一个新模块，如下所示。

共享模块.ts

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

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

应用程序模块.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 {}