ng-bootstrap angular config karma jasmine

Question

Getting the message

If 'ngb-xx' is an Angular component, then verify that it is part of this module

for every angular bootstrap components that i try

Setup process

npm install angular-cli
ng new project 
CD project
npm install 
npm install  --save bootstrap 
npm install --save @ng-bootstrap/ng-bootstrap

In app.module.ts

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

it looks like everything is working with ng-bootstrap and angular

but karma and jasmine keep thowing errors like

Failed: Template parse errors: 'ngb-tab' is not a known element:

If 'ngb-tab' is an Angular component, then verify that it is part of this module.

If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

("

ngalert

Failed: Template parse errors: Can't bind to 'dismissible' since it isn't a known property of 'ngb-alert'.

If 'ngb-alert' is an Angular component and it has 'dismissible' input, then verify that it is part of this module.

If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Looks like i am missing something in the configuration of karma and/or jasmine

Please help // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html

karma.conf.js

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
  });
};

you need to add ngalert and ngb-tab to the ngmodule's declarations — mast3rd3mon
@Pascal you added the karma configuration and not the karma code — Aravind

Aravind Aravind · Accepted Answer · 2018-01-30T10:28:49

Your test is missing the NgbModule import, to fix it you should be

importing the module

import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ;

adding it to the TestBed imports

TestBed.configureTestingModule({
    imports: [NgbModule, ...],
    declarations: [...],
    providers: [...]
});

ng-bootstrap angular config karma jasmine

1 Answers