Initially, I created a fresh project using the Angular CLI by running this command:
ng new my-project
Next, I followed the instructions in the angular-cli readme to install Bootstrap 4.
After that, I installed NG Bootstrap.
Then, I generated a new component using the command:
ng g component my-carousel
Utilizing the following code snippet, I created a carousel in 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>
While I can see the carousel in the browser, running tests using the command:
ng test --single-run
Results in the following error:
'ngb-carousel' is not a known element:
1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-carousel' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
Below is the testing code in 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();
}));
});
Although I searched for similar questions, the links provided did not fully address my issue:
Template parse error in Jasmine test but not actual app
Angular2 Cli Test (Webpack) Erros: “Error: Template parse errors”