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

Question

首先，我使用 angular cli 使用以下命令创建了一个新项目

ng new my-project

然后我使用 angular-cli readme 中的说明安装了 bootstrap 4

之后我安装了NG Bootstrap

然后我使用以下命令创建了一个新组件

ng g component my-carousel

然后我使用以下标记在 my-carousel/my-carousel.component.html 中呈现轮播

<ngb-carousel class="app-my-carousel">
  <template ngbSlide>
    <img src="http://lorempixel.com/900/500?r=1" alt="First">
    <div class="carousel-caption">
      <h3>First</h3>
      <p>First description</p>
    </div>
  </template>
  <template ngbSlide>
    <img src="http://lorempixel.com/900/500?r=2" alt="Second">
    <div class="carousel-caption">
      <h3>Second</h3>
      <p>Second description</p>
    </div>
  </template>
</ngb-carousel>

我可以在浏览器中查看轮播，但是当我使用以下命令执行测试时

ng test --single-run

我收到以下错误

'ngb-carousel' 不是已知元素：
1. 如果“ngb-carousel”是一个 Angular 组件，则验证它是否是该模块的一部分。
2. 如果 'ngb-carousel' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schemas' 禁止显示此消息。

这里是测试 my-carousel.component.spec.ts 的代码

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MyCarouselComponent } from './my-carousel.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

describe('MyCarouselComponent', () => {
  let component: MyCarouselComponent;
  let fixture: ComponentFixture<MyCarouselComponent>;

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

  beforeEach(() => {
    fixture = TestBed.createComponent(MyCarouselComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should render the bootstrap carousel', async(() => {
    fixture.detectChanges();
    let compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('ngb-carousel')).not.toBeNull();
  }));
});

我搜索了一下，发现以下问题与我的问题相似但不一样

Template parse error in Jasmine test but not actual app
Angular2 Cli Test (Webpack) Erros: “Error: Template parse errors”

Answer 1

为了让它工作，我需要更改应用程序组件的规范以包含 NgbModule，我在 this 回答中了解到我需要从一些测试中删除 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 {}