angular - ng 测试模板解析错误“ngb-carousel”不是已知元素

Answer 1

为了使它工作，我需要更改要包含的应用程序组件的规范，NgbModule我在这个答案中了解到我需要从一些测试中删除 async() 调用

这是 app.component.spec.ts 的规范

/* tslint:disable:no-unused-variable */

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { MyCarouselComponent } from './my-carousel/my-carousel.component';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        MyCarouselComponent
      ],
      imports: [
        NgbModule.forRoot()
      ]
    });
    TestBed.compileComponents();
  });

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

  it(`should have as title 'app works!'`, async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app works!');
  }));

  it('should render title in a h1 tag', () => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    let qry = compiled.querySelector('h1').textContent
    expect(qry).toContain('app works!');
  });

  it('should render the carousel component', () => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    let qry = compiled.querySelector('app-my-carousel').textContent;
    expect(qry).not.toBeNull();
  });
});

Answer 2

我面临同样的问题。但是，在导入引导模块NgbModule后，它就解决了。在这里，我在我的应用程序中使用了延迟加载概念。所以我在组件相关的 module.ts 文件中导入了该引导模块。

 /* in my career.module.ts */ 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

 @NgModule({
 declarations: [CareerComponent],
 imports: [CommonModule, NgbModule],
 })
 export class CareerModule {}