ng2-bootstrap 在 Angular 2 中不起作用（'alert' 不是已知元素：）答案

【问题标题】：ng2-bootstrap not working in Angular 2 ('alert' is not a known element:)ng2-bootstrap 在 Angular 2 中不起作用（'alert' 不是已知元素：）
【发布时间】：2017-03-17 03:03:09
【问题描述】：

我已经在运行 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 {

    }
}

但是在浏览网站时出现以下错误：

未处理的 Promise 拒绝：模板解析错误： 'alert' 不是已知元素： 1. 如果 'alert' 是一个 Angular 组件，那么验证它是这个 >module 的一部分。 2. 如果 'alert' 是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的 >'@NgModule.schemas' 以禁止显示此消息。 ("

[错误->]你好

我显然在这里做错了什么，但是什么？

【问题讨论】：

我认为您应该将警报模块添加到您的 app.module 导入中以使警报组件可用。 import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';

标签： angular ng2-bootstrap

【解决方案1】：

dilvish.john 的答案对我有用，除了在我的 component.ts 中我必须放

import { AlertModule } from 'ng2-bootstrap/alert';

但我不明白背后的逻辑：为什么在 app.module 中，我们必须导入“ng2-bootstrap/ng-2bootstrap”，而在组件中我们必须导入“ng2-bootstrap/alert”？

1- 自从我们在 app.module 中导入 Ng2BootstrapModule 后，它不是对所有组件都可用吗？所以 AlertModule 应该是可用的，而不需要明确指定它

2- 如果我们应该在组件中明确地这样做，我们不应该使用 import from 'Ng2BootstrapModule/alert'?

谢谢，

【讨论】：

【解决方案2】：

你的 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

    ],
    declarations: [
       AppComponent
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    providers: [
        NotificationService,
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

并将 client-info.component.ts 更改为此

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

        }

}

【讨论】：