title: ng test template parse error 'ngb-carousel' is not a known element
body: <p>First I have created a new project using the angular cli using the following command</p>
  
  <pre><code>ng new my-project
  </code></pre>
  
  <p>Then I installed bootstrap 4 using the instructions from the <a href="https://github.com/angular/angular-cli#global-library-installation" rel="nofollow noreferrer">angular-cli readme</a></p>
  
  <p>After that I installed <a href="https://github.com/ng-bootstrap/ng-bootstrap#installation" rel="nofollow noreferrer">NG Bootstrap</a></p>
  
  <p>I then created a new component using the following command</p>
  
  <pre><code>ng g component my-carousel
  </code></pre>
  
  <p>I then used the following markup to render a carousel in my-carousel/my-carousel.component.html</p>
  
  <pre><code>&lt;ngb-carousel class="app-my-carousel"&gt;
    &lt;template ngbSlide&gt;
      &lt;img src="http://lorempixel.com/900/500?r=1" alt="First"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;First&lt;/h3&gt;
        &lt;p&gt;First description&lt;/p&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;template ngbSlide&gt;
      &lt;img src="http://lorempixel.com/900/500?r=2" alt="Second"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h3&gt;Second&lt;/h3&gt;
        &lt;p&gt;Second description&lt;/p&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/ngb-carousel&gt;
  </code></pre>
  
  <p>I am able to view the carousel in a browser but when I execute the tests with the following command</p>
  
  <pre><code>ng test --single-run
  </code></pre>
  
  <p>I get the following error</p>
  
  <blockquote>
    <p>'ngb-carousel' is not a known element:<br>
    1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module.<br>
    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.</p>
  </blockquote>
  
  <p>Here is the code for the test my-carousel.component.spec.ts</p>
  
  <pre><code>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', () =&gt; {
    let component: MyCarouselComponent;
    let fixture: ComponentFixture&lt;MyCarouselComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ MyCarouselComponent ],
        imports: [ NgbModule.forRoot() ]
      })
      .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(MyCarouselComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  
    it('should render the bootstrap carousel', async(() =&gt; {
      fixture.detectChanges();
      let compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('ngb-carousel')).not.toBeNull();
    }));
  });
  </code></pre>
  
  <p>I searched around a little and found the following questions which are similar but not the same as my problem</p>
  
  <p><a href="https://stackoverflow.com/questions/40715688/template-parse-error-in-jasmine-test-but-not-actual-app">Template parse error in Jasmine test but not actual app</a><br>
  <a href="https://stackoverflow.com/questions/39640020/angular2-cli-test-webpack-erros-error-template-parse-errors">Angular2 Cli Test (Webpack) Erros: “Error: Template parse errors”</a></p>