NG2-ブートストラップ角度2で動作していない（「警告」は、既知の要素:)

Question

ではありません、私は経由角度2.0.1を実行しているプロジェクトのNG2-ブートストラップをインストールしている：

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

を私は明らかに間違ってここに何かをやっているが、何？

Answer 1

あなたapp.module.tsはthisのようにする必要があります。

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

そしてdilvish.johnの答えは私のために働いたこの

// 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 { 

     } 

} 

Answer 2

にクライアントinfo.component.tsを変更するには、ことを除いて私のcomponent.tsに私が

を入れていましたimport { AlertModule } from 'ng2-bootstrap/alert';

私は、なぜ、app.moduleで 'ng2-bootstrap/ng-2bootstrap'をインポートしなければならなかったのか、そして 'ng2-boots'トラップ/アラート '？

私はapp.moduleにインポートして以来、すべてのコンポーネントで使用できるNg2BootstrapModuleはありませんか？私はあなたが追加すべきだと思う