ng2-bootstrap在Angular 2中不起作用(“警报"不是已知元素:) [英] ng2-bootstrap not working in Angular 2 ('alert' is not a known element:)
问题描述
我已通过以下方式在运行Angular 2.0.1的项目中安装了ng2-bootstrap:
I've installed ng2-bootstrap on a project running Angular 2.0.1 via:
npm install ng2-bootstrap --save
我已经这样设置了我的项目:
I've setup my project like this:
//systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'moment': 'node_modules/moment/moment.js',
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// our app is within the app folder
app: 'app',
// angular bundles
并且:
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
import { ClientModule } from './client/client.module';
@NgModule({
imports: [
Ng2BootstrapModule
],
declarations: [
AppComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [
NotificationService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
并且:
// client.module.ts
import { Ng2BootstrapModule } from 'ng2-bootstrap';
@NgModule({
imports: [
Ng2BootstrapModule
],
declarations: [
],
providers: [
]
})
export class ClientModule { }
最后:
// client-info.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'client-info',
template: `
<div >
<alert type="success">hello</alert>
</div>
`,
styleUrls: ['app/client/client.css']
})
export class ClientInfoComponent {
constructor() {
}
ngOnInit(): void { }
ngOnDestroy(): void {
}
}
但是在浏览网站时,出现以下错误:
But when browsing the site I get the following error:
未处理的承诺拒绝:模板解析错误: 警报"不是已知元素: 1.如果'alert'是Angular组件,则验证它是否是此模块的一部分. 2.如果'alert'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的>'@ NgModule.schemas'中以禁止显示此消息. ("
Unhandled Promise rejection: Template parse errors: 'alert' is not a known element: 1. If 'alert' is an Angular component, then verify that it is part of this >module. 2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the >'@NgModule.schemas' of this component to suppress this message. ("
[错误->]您好
我显然在这里做错了什么,但是什么呢?
I am obviously doing something wrong here but what?
推荐答案
您的app.module.ts应该像这样.对我有帮助.
You app.module.ts should be like this.It helps me.
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ClientModule } from './client/client.module';
import { AlertModule } from 'ng2-bootstrap/components/alert';
@NgModule({
imports: [
Ng2BootstrapModule,
AlertModule
],
declarations: [
AppComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [
NotificationService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
然后将client-info.component.ts更改为此
And change client-info.component.ts to this
// client-info.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AlertModule } from 'ng2-bootstrap/components/alert';
@Component({
selector: 'client-info',
template: `
<div >
<alert type="success">hello</alert>
</div>
`,
styleUrls: ['app/client/client.css']
})
export class ClientInfoComponent {
constructor() {
}
ngOnInit(): void { }
ngOnDestroy(): void {
}
}
这篇关于ng2-bootstrap在Angular 2中不起作用(“警报"不是已知元素:)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!