[英]ng-boostrap not workingIf 'ngb-xx' is an Angular component, then verify that it is part of this module
Getting the message 取得讯息
If 'ngb-xx' is an Angular component, then verify that it is part of this module 如果'ngb-xx'是Angular组件,请验证它是否属于此模块
for every angular bootstrap components that i try 对于我尝试的每个角度引导程序组件
Setup process 设定程序
npm install angular-cli
ng new project
npm install
npm install --save bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
In app.module.ts 在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 { }
In .angular-cli.json 在.angular-cli.json中
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Even try add npm install --save jquery and in .angular-cli.json 甚至尝试添加npm install --save jquery并在.angular-cli.json中
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
in app.component.html add 在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>
the css seems to work but karma errors and no js CSS似乎工作,但因果报应错误,没有JS
Failed: Template parse errors: 'ngb-tab' is not a known element: 失败:模板解析错误:“ ngb-tab”不是已知元素:
If 'ngb-tab' is an Angular component, then verify that it is part of this module. 如果“ ngb-tab”是Angular组件,请验证它是否属于此模块。
If 'ngb-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 如果“ ngb-tab”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。
(" (”
ngalert only 仅ngalert
Failed: Template parse errors: Can't bind to 'dismissible' since it isn't a known property of 'ngb-alert'. 失败:模板解析错误:无法绑定到“可禁用”,因为它不是“ ngb-alert”的已知属性。
If 'ngb-alert' is an Angular component and it has 'dismissible' input, then verify that it is part of this module. 如果“ ngb-alert”是Angular组件,并且具有“ dismissable”输入,则请验证它是否属于此模块。
If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 如果“ ngb-alert”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 要允许任何属性,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。
Please help thanks 请帮忙谢谢
Looks like the problem seems to be comming from karma/jasmine setup 看来问题似乎来自业力/茉莉花安装程序
here is my karma.conf.js 这是我的karma.conf.js
// Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html // 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
});
};
Issue is here : 问题在这里:
npm install angular-cli
ng new project
npm install
npm install --save bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
You Forgot to go in to the directory after project creation 您创建项目后忘记进入目录
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
Another issue I can find here is <template ngbTabContent>
我在这里可以找到的另一个问题是<template ngbTabContent>
Change <template ngbTabContent>
to <ng-template ngbTabContent>
and also </template>
to </ng-template>
. 将<template ngbTabContent>
更改为<ng-template ngbTabContent>
,还将</template>
更改为</ng-template>
。
Finally find the problem 终于找到问题了
when installing and configuring modules dont forget to inset into test.spec.ts 在安装和配置模块时,请不要忘记插入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();
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.