title: ng-bootstrap angular config karma jasmine
body: <p>Getting the message </p>
  
  <blockquote>
    <p>If 'ngb-xx' is an Angular component, then verify that it is part of
    this module</p>
  </blockquote>
  
  <p>for every angular bootstrap components that i try </p>
  
  <p>Setup process </p>
  
  <pre><code>npm install angular-cli
  ng new project 
  CD project
  npm install 
  npm install  --save bootstrap 
  npm install --save @ng-bootstrap/ng-bootstrap
  </code></pre>
  
  <p>In app.module.ts </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http' ;
  
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ;
  
  import { AppComponent } from './app.component';
  import { NgForm } from '@angular/forms/src/directives/ng_form';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      NgbModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>it looks like everything is working with ng-bootstrap and angular </p>
  
  <p>but karma and jasmine keep thowing errors like </p>
  
  <blockquote>
    <p>Failed: Template parse errors: 'ngb-tab' is not a known element:</p>
    
    <ol>
    <li><p>If 'ngb-tab' is an Angular component, then verify that it is part of this module.</p></li>
    <li><p>If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</p></li>
    </ol>
    
    <p>(" </p>
  </blockquote>
  
  <p>ngalert </p>
  
  <blockquote>
    <p>Failed: Template parse errors: Can't bind to 'dismissible' since it
    isn't a known property of 'ngb-alert'.</p>
    
    <ol>
    <li><p>If 'ngb-alert' is an Angular component and it has 'dismissible' input, then verify that it is part of this module.</p></li>
    <li><p>If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.</p></li>
    <li><p>To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.</p></li>
    </ol>
  </blockquote>
  
  <p>Looks like i am missing something in the configuration of karma and/or jasmine </p>
  
  <p>Please help
  // Karma configuration file, see link for more information
  // <a href="https://karma-runner.github.io/1.0/config/configuration-file.html" rel="nofollow noreferrer">https://karma-runner.github.io/1.0/config/configuration-file.html</a></p>
  
  <p>karma.conf.js</p>
  
  <pre><code>module.exports = function (config) {
    config.set({
      basePath: '',
      frameworks: ['jasmine', '@angular/cli'],
      plugins: [
        require('karma-jasmine'),
        require('karma-chrome-launcher'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma')
      ],
      client:{
        clearContext: false // leave Jasmine Spec Runner output visible in browser
      },
      coverageIstanbulReporter: {
        reports: [ 'html', 'lcovonly' ],
        fixWebpackSourcePaths: true
      },
      angularCli: {
        environment: 'dev'
      },
      reporters: ['progress', 'kjhtml'],
      port: 9876,
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: true,
      browsers: ['Chrome'],
      singleRun: false
    });
  };
  </code></pre>