Angular 角度9组件测试：导出名称'；ngbNav'；找不到

我有一个模态组件，我想测试。 但它总是抱怨“没有找到名为‘ngbNav’的出口”。 任何关于如何解决这个问题的想法都会很好

Error: Export of name 'ngbNav' not found!
        at cacheMatchingLocalNames (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13112:1)
        at resolveDirectives (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12871:1)
        at elementStartFirstCreatePass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21229:1)
        at ɵɵelementStart (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:21271:1)
        at TemplateModalComponent_Template (ng:///TemplateModalComponent.js:381:9)
        at executeTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:12129:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11899:1)
        at renderComponent (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13509:1)
        at renderChildComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11700:1)
        at renderView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11925:1)

template-modal.component.html

    <div class="modal-header">
  <h4 class="modal-title" ngbTooltip="{{template ? template.id : ''}}" triggers="click:blur">{{"template_edit" | translate}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form class="form" [formGroup]="this.templateFormGroup">
    <div formGroupName="template">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="name" formControlName="name" required/>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Instrument Type</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" name="instrumentType" formControlName="instrumentType" value="DERIVATIVE" readonly />
            </div>
          </div>
        </div>
      </div>
      <div class="row" *ngIf="isStandardTemplate">
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Publisher</label>
            <div class="col-sm-9">
              <select class="form-control" formControlName="publisherId" (change)="resetAdvertiser()">
                <option [value]="null">{{"select-choose" | translate}}</option>
                <option [value]="p.id" *ngFor="let p of publisher | orderBy:'name'">{{p.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group row">
            <label class="col-sm-3 col-form-label">Advertiser</label>
            <div class="col-sm-9">
              <select class="form-control" formControlName="advertiserId" (change)="resetPublisher()">
                <option [value]="null">{{"select-choose" | translate}}</option>
                <option [value]="a.id" *ngFor="let a of advertiser | orderBy:'name'">{{a.name}}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="row justify-content-end mb-3" *ngIf="!isStandardTemplate">
        <div class="col-3">
          <button class="btn btn-secondary form-control" (click)="createStandardTemplateModal()">Standard Templates</button>
        </div>
      </div>
      <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs justify-content-center">
        <li [ngbNavItem]="1">
          <a ngbNavLink>Filter</a>
          <ng-template ngbNavContent>
            <ngb-alert type="secondary" *ngIf="!filter || filter.length == 0">Keine Filter vorhanden. Bitte anlegen!
            </ngb-alert>
            <div class="table-responsive" *ngIf="filter.length > 0">
              <table class="table">
                <thead>
                <tr>
                  <th>Name</th>
                  <th>Variable</th>
                  <th>{{"criteria" | translate}}</th>
                  <th>{{"comment" | translate}}</th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let f of filter | orderBy:'name'">
                  <td>{{f.name}}</td>
                  <td>{{f.templateVariableName}}</td>
                  <td><span class="badge badge-pill badge-secondary mr-1" *ngFor="let i of f.filterCriteria">
                      {{i.field}}
                      </span></td>
                  <td>{{f.comment}}</td>
                  <td>
                    <span class="prodo-icon prodo-delete-icon cursor-pointer float-right" (click)="deleteFilter(f.id)" ngbTooltip="{{'delete' | translate}}"></span>
                    <span class="prodo-icon prodo-edit-icon cursor-pointer float-right" *ngIf="f.id" ngbTooltip="{{'edit' | translate}}" (click)="chooseFilter(f.id)"></span>

                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="row">
              <div class="col">
                <button type="button" class="btn btn-secondary"
                        (click)="newFilter()">{{"filter_new" | translate}}</button>
              </div>
            </div>
          </ng-template>
        </li>
        <li [ngbNavItem]="2">
          <a ngbNavLink>HTML-Template</a>
          <ng-template ngbNavContent>
            <div class="row">
              <div class="col-md-12">
                <editor formControlName="html" required name="html" [init]="tinyMceConfig"></editor>
              </div>
            </div>
          </ng-template>
        </li>
        <li [ngbNavItem]="3">
          <a ngbNavLink>{{"disclaimer_page_end" | translate}}</a>
          <ng-template ngbNavContent>
            <div class="row">
              <div class="col-md-12">
                <editor formControlName="disclaimer" name="disclaimer" [init]="tinyMceConfig">
                </editor>
              </div>
            </div>
          </ng-template>
        </li>
        <li [ngbNavItem]="4">
          <a ngbNavLink>{{"disclaimer_at_ad" | translate}}</a>
          <ng-template ngbNavContent>
            <div class="row">
              <div class="col-md-12">
                <editor formControlName="disclaimerJson" name="disclaimerJson" [init]="tinyMceConfig">
                </editor>
              </div>
            </div>
          </ng-template>
        </li>
      </ul>
    </div>
  </form>
  <div [ngbNavOutlet]="nav" class="mt-2"></div>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Close</button>
  <button type="button" class="btn btn-success" (click)="passBack()" [disabled]="!templateFormGroup.valid">Speichern
  </button>
</div>

我真的很感谢任何提示或帮助调试这个步骤。

---

干杯Maik

您应该导入NgbNavModule

imports: [NgbNavModule],

---

当我升级到Angular9并且@ng bootstrap/ng bootstrap仍处于5.x.x时，我就想到了这一点。请参阅支持的Angular版本

谢谢。我现在导入了它，还必须将它放入提供者数组中。现在它起作用了。

import {async, TestBed} from '@angular/core/testing';

import {TemplateModalComponent} from './template-modal.component';
import {HttpClient} from "@angular/common/http";
import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
import {RouterTestingModule} from "@angular/router/testing";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {HttpLoaderFactory} from "../../../app.module";
import {FormBuilder, FormsModule, NgForm} from "@angular/forms";
import {NgbActiveModal, NgbModal, NgbNav, NgbNavConfig} from "@ng-bootstrap/ng-bootstrap";
import {AdslotService} from "../../../services/adslot.service";
import {ErrorHandlingService} from "../../../services/error-handling.service";
import {ToastService} from "../../../services/toast.service";

describe('TemplateModalComponent', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
          }
        }),
      ],
      declarations: [ TemplateModalComponent ],
      providers: [
        FormsModule,
        NgbActiveModal,
        AdslotService,
        ErrorHandlingService,
        ToastService,
        FormBuilder,
      ]
    }).compileComponents();
    // Inject the http service and test controller for each test
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);

  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(TemplateModalComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

imports: [NgbNavModule],