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（）调用< / p>

这是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 文件中导入了该引导模块。

services:
  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080
  db:
    image: mysql:latest
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: 'example' # TODO: Change this      
    volumes:
      - "./config/my.conf:/etc/mysql/conf.d/config-file.cnf"
      - "./data:/var/lib/mysql:rw"

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

2 个答案: