Angular 7 NGB折叠菜单不渲染

Question

我尝试直接从ng bootstrap站点呈现以下折叠菜单：

<div class="container-fluid">
  <div class="col-sm-12">
    <h1 class="text-center">
      Discounts
    </h1>
    <div class="row">
      <ngb-accordion #acc="ngbAccordion">
        <ngb-panel id="toggle-1" title="First panel">
          <ng-template ngbPanelContent>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
            labore sustainable VHS.
          </ng-template>
        </ngb-panel>
        <ngb-panel id="toggle-2" title="Second">
          <ng-template ngbPanelContent>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
            aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
            sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
            craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
            occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
            labore sustainable VHS.
          </ng-template>
        </ngb-panel>
      </ngb-accordion>
    </div>
      .
      .
      .

我们有angular 7，ng-bootstrap 4+，据我所知，一切都应该正常工作。我们现在手足无措。这是我的应用模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavMenuTopComponent } from './views/common/nav-menu-top/nav-menu-top.component';
import { LoginComponent } from './views/common/login.component';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { AdministrationAnnouncementsComponent } from './views/administration/announcements/administrationAnnouncements.component';
import { AdministrationAppointmentsComponent } from './views/administration/appointments/administrationAppointments.component';
//import { AdministrationAppointmentsComponent } from './views/administration/appointments/administrationAppointments_2.component';
import { AdministrationArchivesComponent } from './views/administration/archives/administrationArchives.component';
import { AdministrationCallsComponent } from './views/administration/calls/administrationCalls.component';
import { AdministrationCompaniesComponent } from './views/administration/companies/administrationCompanies.component';
import { AdministrationCustomersComponent } from './views/administration/customers/administrationCustomers.component';
import { AdministrationEmployeesComponent } from './views/administration/employees/administrationEmployees.component';
import { AdministrationInvoicesComponent } from './views/administration/invoices/administrationInvoices.component';
import { AdministrationObservationsComponent } from './views/administration/observations/administrationObservations.component';
import { AdministrationProblemsComponent } from './views/administration/problems/administrationProblems.component';
import { AdministrationQuickInvoicesComponent } from './views/administration/quickInvoices/administrationQuickInvoices.component';
//import { TechnicianAppointmentsComponent } from './views/technician/appointments/technicianAppointments.component';
//import { TechnicianDiscountsComponent } from './views/technician/discounts/technicianDiscounts.component';
//import { TechnicianHomeComponent } from './views/technician/home/technicianHome.component';
//import { TechnicianInvoicesComponent } from './views/technician/invoices/technicianInvoices.component';
//import { TechnicianOptionsComponent } from './views/technician/options/technicianOptions.component';
//import { TechnicianProblemsComponent } from './views/technician/problems/technicianProblems.component';
//import { TechnicianReviewsComponent } from './views/technician/reviews/technicianReviews.component';
//import { TechnicianSolutionsComponent } from './views/technician/solutions/technicianSolutions.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
import { JwtModule } from '@auth0/angular-jwt';
import { AdminAuthGuard } from './guards/admin-auth-guard.service';
import { TechAuthGuard } from './guards/tech-auth-guard.service';
import { companyList } from './views/administration/partials/companyList/companyList.component';
import { employeeForm } from './views/administration/partials/employeeForm/employeeForm.component';
import { ButtonRenderComponent } from './views/administration/partials/button-render/button.render.component';
import { employeeSelectForm } from './views/administration/partials/employeeSelectForm/employeeSelectForm.component';
import { customerForm } from './views/administration/partials/customerForm/customerForm.component';
import { cityStateZipSelector } from './views/administration/partials/cityStateZipSelector/cityStateZip.component';
import { customerCreateModal } from './views/administration/partials/customerCreationModal/customerCreationModal.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { createCustomerForm } from './views/administration/partials/createCustomerForm/createCustomerForm.component';
import { customerUpdateForm } from './views/administration/partials/customerUpdateForm/customerUpdateForm.component';
import { employeeCreateForm } from './views/administration/partials/employeeCreateForm/employeeCreateForm.component';
import { CounterComponent } from './views/common/counter/counter.component';
import { jqxSchedulerComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxscheduler';
import { TaskManagementComponent } from './views/administration/taskManagement/taskManagement.component';
import { TaskManagementHomeComponent } from './views/administration/taskManagement/taskManagementHome/taskManagementHome.component';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TaskManagementCategoriesComponent } from './views/administration/taskManagement/taskManagementCategories/taskManagementCategories.component';
import { DemoTechComponent } from './views/technician/demoHome/demoHome.component';
import { AppointmentMaintenance } from './views/technician/appointmentMaintenance/appointmentMaintenance.component';
import { getCompanySalesTax } from './views/administration/partials/getCompanySalesTax/getCompanySalesTax.component';
import { getEmployeeList } from './views/administration/partials/employeeList/employeeList.component';
import { getObservationsList } from './views/administration/partials/ObservationsList/observationsList.component';
import { getCategorySubcategoryList } from './views/administration/partials/CategorySubcategoryList/categorySubcategory.component';
import { ObservationsComponent } from './views/technician/observations/observations.component';
import { FindingsComponent } from './views/technician/findings/findings.component';
import { TechOptionsComponent } from './views/technician/tech-options/tech-options.component';
import { CustomerReviewComponent } from './views/technician/customer-review/customer-review.component';
import { DiscountsComponent } from './views/technician/discounts/discounts.component';
import { MaterialNotesComponent } from './views/technician/material-notes/material-notes.component';
import { TechHomeComponent } from './views/technician/techHome/techHome.component';
import { SalesTaxFormComponent } from './views/administration/partials/salesTaxForm/salesTaxForm.component';
import { environment } from '../environments/environment';
import { AnnouncementsDisplayComponent } from './views/technician/partials/announcements/announcements.component';
import { optionCopyMenuComponent } from './views/technician/partials/optionCopy/optionCopyMenu.component';
import { TechLayoutComponent } from './views/common/techLayout/techLayout.component';
import { AdminLayoutComponent } from './views/common/adminLayout/adminLayout.component';
import { AppointmentDetails } from './views/technician/appointmentDetails/appointmentDetails.component';
import { techHeaderComponent } from './views/technician/partials/techHeader/techHeader.component';
import { DiscountFormComponent } from './views/administration/partials/companyDiscountsForm/discountsForm.component';
import { ServiceChargeFormComponent } from './views/administration/partials/companyServiceChargeForm/serviceChargeForm.component';
import { ObservationListComponent } from './views/technician/partials/observationList/observationList.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

export function jwtTokenGetter() {
  return sessionStorage.getItem("fleetbooks_JWT");
};

@NgModule({
  declarations: [
    AppComponent,
    NavMenuTopComponent,
    LoginComponent,
    AdministrationAnnouncementsComponent,
    AppointmentDetails,
    AdministrationAppointmentsComponent,
    AdministrationArchivesComponent,
    AdministrationCallsComponent,
    AdministrationCompaniesComponent,
    AdministrationCustomersComponent,
    AdministrationEmployeesComponent,
    AdministrationInvoicesComponent,
    AdministrationObservationsComponent,
    AdministrationProblemsComponent,
    AdministrationQuickInvoicesComponent,
    //TechnicianAppointmentsComponent,
    //TechnicianDiscountsComponent,
    //TechnicianHomeComponent,
    //TechnicianInvoicesComponent,
    //TechnicianOptionsComponent,
    //TechnicianProblemsComponent,
    //TechnicianReviewsComponent,
    //TechnicianSolutionsComponent,
    jqxGridComponent,
    jqxSchedulerComponent,
    companyList,
    employeeForm,
    employeeSelectForm,
    employeeCreateForm,
    customerForm,
    cityStateZipSelector,
    createCustomerForm,
    customerUpdateForm,
    customerCreateModal,
    CounterComponent,
    TaskManagementComponent,
    TaskManagementHomeComponent,
    TaskManagementCategoriesComponent,
    DemoTechComponent,
    AppointmentMaintenance,
    getEmployeeList,
    getCompanySalesTax,
    getObservationsList,
    getCategorySubcategoryList,
    ButtonRenderComponent,
    ObservationsComponent,
    FindingsComponent,
    TechOptionsComponent,
    CustomerReviewComponent,
    DiscountsComponent,
    MaterialNotesComponent,
    TechHomeComponent,
    SalesTaxFormComponent,
    AnnouncementsDisplayComponent,
    TechLayoutComponent,
    AdminLayoutComponent,
    optionCopyMenuComponent,
    techHeaderComponent,
    DiscountFormComponent,
    ServiceChargeFormComponent,
    ObservationListComponent,
  ],
  entryComponents: [ButtonRenderComponent],
  imports: [
    Ng2SmartTableModule,
    BrowserModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: jwtTokenGetter,
        whitelistedDomains: [environment.baseUrl],
        blacklistedRoutes: [],
      }
    }),
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 3000,
      positionClass: 'toast-top-right',
    }),
    FontAwesomeModule
  ],
  providers: [AdminAuthGuard, TechAuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

我知道它很长，如果需要的话，我可以把所有无用的东西都拿出来。如果需要，我也可以发布我的package.json。如果我检查元素，上面链接的代码将呈现如下所示：

<ngb-accordion activeids="ngb-panel-0" class="accordion" role="tablist" ng-reflect-active-ids="ngb-panel-0"><!----></ngb-accordion>

没有控制台错误，没有编译错误，什么都没有。它只是没有出现在页面上，当我去查看inspect元素时，我看到的就是这些。

这是我正在寻找的参考教程：https://ng-bootstrap.github.io/#/components/accordion/api

Answer 1

仔细检查控制台是否存在可能导致其无法呈现的错误。