ng2-bootstrap не работает в Angular 2 («оповещение» не является известным элементом :)

Я установил ng2-bootstrap в проекте с Angular 2.0.1 через:

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 {

    }
}

Но при просмотре сайта я получаю следующую ошибку:

Отклонение необработанного обещания: ошибки синтаксического анализа шаблона: «предупреждение» не является известным элементом: 1. Если «предупреждение» является компонентом Angular, убедитесь, что оно является частью этого> модуля. 2. Если «предупреждение» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в >'@NgModule.schemas' этого компонента, чтобы подавить это сообщение. ("

[ОШИБКА ->] привет

Я явно делаю что-то не так, но что?


angular ng2-bootstrap
person Magnus Jonsson    schedule 03.11.2016    source источник
comment
Я думаю, вам следует добавить модуль оповещения в импорт app.module, чтобы сделать компонент оповещения доступным. import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';   -  person AWolf    schedule 09.11.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы 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 {

        }

}
person Ivan Smyrnov    schedule 16.11.2016

arrow_upward
2
arrow_downward

Ответ dilvish.john у меня сработал, за исключением того, что в моем component.ts мне пришлось поставить

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

Но я не понимаю логики: почему в app.module мы должны были импортировать «ng2-bootstrap/ng-2bootstrap», а в компоненте мы должны были импортировать «ng2-bootstrap/alert»?

1- не доступен ли Ng2BootstrapModule для всех компонентов, так как мы импортировали его в app.module? и поэтому AlertModule должен быть доступен без явного указания

2- и если мы должны сделать это явно в компоненте, разве мы не должны использовать import from 'Ng2BootstrapModule/alert'?

Спасибо,

person B. Tiba    schedule 22.02.2017