ng-bootstrap angular config karma jasmine

时间:2018-01-30 09:50:43

标签: angular jasmine karma-runner karma-jasmine ng-bootstrap

获取消息

  

如果' ngb-xx'是一个Angular组件,然后验证它是否属于   这个模块

我尝试的每个角度引导程序组件

设置流程

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

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

看起来一切都在使用ng-bootstrap和angular

但是业力和茉莉花会像

一样保持错误
  

失败:模板解析错误:' ngb-tab'不是一个已知元素:

     
      
  1. 如果' ngb-tab'是一个Angular组件,然后验证它是否是该模块的一部分。

  2.   
  3. 如果' ngb-tab'是一个Web组件,然后添加' CUSTOM_ELEMENTS_SCHEMA'到了' @ NgModule.schemas'该组件可以禁止显示此消息。

  4.         

    ("

ngalert

  

失败:模板解析错误:无法绑定到“不允许”的错误状态。既然如此   不属于' ngb-alert'。

的已知属性      
      
  1. 如果' ngb-alert'是一个Angular组件,它是“不允许的”#39;输入,然后验证它是否是该模块的一部分。

  2.   
  3. 如果' ngb-alert'是一个Web组件,然后添加' CUSTOM_ELEMENTS_SCHEMA'到了' @ NgModule.schemas'该组件可以禁止显示此消息。

  4.   
  5. 要允许任何属性添加' NO_ERRORS_SCHEMA'到了' @ NgModule.schemas'这个组件。

  6.   

看起来我在karma和/或jasmine

的配置中遗漏了一些东西

请帮忙 // Karma配置文件,请参阅链接以获取更多信息 // 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
  });
};

1 个答案:

答案 0 :(得分:2)

您的测试缺少NgbModule导入,要修复它

  • 导入模块

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ;
    
  • 将其添加到TestBed导入

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