ng test template parse error 'ngb-carousel' is not a known element

Question

First I have created a new project using the angular cli using the following command

ng new my-project

Then I installed bootstrap 4 using the instructions from the angular-cli readme

After that I installed NG Bootstrap

I then created a new component using the following command

ng g component my-carousel

I then used the following markup to render 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>

I am able to view the carousel in a browser but when I execute the tests with the following command

ng test --single-run

I get 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 t o suppress this message.

Here is the code for the test 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();
  }));
});

I searched around a little and found the following questions which are similar but not the same as my problem

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

Answer 1

To get this working I needed to alter the specs for the app component to include NgbModule and I learned in this answer that I need to remove the async() calls from some of the tests

this is the spec for 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

I faced same issue. But, after importing bootstrap module NgbModule it's solved. Here I used lazy loading concept in my application. So i imported that bootstrap module in the component related module.ts file.

 /* 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 {}