我通过以下方式在运行Angular 2.0.1的项目上安装了ng2-bootstrap:
npm install ng2-bootstrap --save
我设置了这样的项目:
//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 { } }
但在浏览网站时,我收到以下错误:
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. (“[ERROR ->]hello
我显然在这里做错了但是什么?
解决方法
app.module.ts应该是这样的.它对我很有帮助.
// 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 ],bootstrap: [AppComponent] }) export class AppModule { }
并将client-info.component.ts更改为此
// client-info.component.ts import { Component,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 { } }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。