Question

获取消息

如果＆＃39; ngb-xx＆＃39;是一个Angular组件，然后验证它是否属于这个模块

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

设置流程

npm install angular-cli
ng new 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 { }

在.angular-cli.json

  "styles": [
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

即使尝试添加npm install --save jquery和.angular-cli.json

  "scripts": [ 
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

在app.component.html中添加

  <ngb-tabset> 
      <ngb-tab title="test">
        <template ngbTabContent> 
            xxx ss
        </template>
      </ngb-tab>

      <ngb-tab title="test">
          <template ngbTabContent> 
              xxxs ss
          </template>
        </ngb-tab>
  </ngb-tabset>
<p>
  <ngb-alert [dismissible]="false">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
  </ngb-alert>
</p>

css似乎有效，但业力错误而且没有js

失败：模板解析错误：＆＃39; ngb-tab＆＃39;不是一个已知元素：



如果＆＃39; ngb-tab＆＃39;是一个Angular组件，然后验证它是否是该模块的一部分。



如果＆＃39; ngb-tab＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止显示此消息。


（＆＃34;

仅限ngalert

失败：模板解析错误：无法绑定到“不允许”的错误状态。既然如此   不属于＆＃39; ngb-alert＆＃39;。
的已知属性


如果＆＃39; ngb-alert＆＃39;是一个Angular组件，它是“不允许的”＃39;输入，然后验证它是否是该模块的一部分。



如果＆＃39; ngb-alert＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止显示此消息。



要允许任何属性添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。

请帮助谢谢

看起来问题似乎来自karma / jasmine setup

这是我的karma.conf.js

// Karma配置文件，有关详细信息，请参阅链接 // https://karma-runner.github.io/1.0/config/configuration-file.html

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

Answer 1

问题在这里：

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

您忘记在项目创建后进入目录

npm install angular-cli
ng new project 
cd 'project' // <-------------- Here , you missed this
npm install 
npm install  --save bootstrap 
npm install --save @ng-bootstrap/ng-bootstrap

我在这里可以找到的另一个问题是<template ngbTabContent>

将<template ngbTabContent>更改为<ng-template ngbTabContent> </template>至</ng-template>。

<强> WORKING DEMO

Answer 2

最后找到问题

安装和配置模块时不要忘记插入test.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap' ; 
import { BrowserModule } from '@angular/platform-browser';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        NgbModule.forRoot()
      ],
    }).compileComponents();
  }));

ng-boostrap not workingIf＆＃39; ngb-xx＆＃39;是Angular组件，然后验证它是否是此模块的一部分

2 个答案: