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

Posted 2023-03-07

【中文标题】ng 测试模板解析错误“ngb-carousel”不是已知元素

【英文标题】：ng test template parse error 'ngb-carousel' is not a known element

【发布时间】：2017-04-23 15:41:29

【问题描述】：

首先，我使用 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" >
    <div class="carousel-caption">
      <h3>First</h3>
      <p>First description</p>
    </div>
  </template>
  <template ngbSlide>
    <img src="http://lorempixel.com/900/500?r=2" >
    <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 appAngular2 Cli Test (Webpack) Erros: “Error: Template parse errors”

【问题讨论】：

它对我有用。可以加app.component.html和app.component.spec.ts吗？也许您的错误来自app.component.spec.ts

app.component.spect.ts 中的测试失败的原因有很多，首先是因为我没有导入 NgbModule，然后我需要从一些测试中删除异步调用

Angular 2 Karma Test 'component-name' is not a known element的可能重复

【参考方案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();
  );
);

【参考方案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