ng2-bootstrap ne fonctionne pas Angular 2 ('alerte' n'est pas un élément connu :)
J'ai installé ng2-bootstrap sur un projet exécutant Angular 2.0.1 via:
npm install ng2-bootstrap --save
J'ai configuré mon projet comme ceci:
//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
Et:
// 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 { }
Et:
// client.module.ts
import { Ng2BootstrapModule } from 'ng2-bootstrap';
@NgModule({
imports: [
Ng2BootstrapModule
],
declarations: [
],
providers: [
]
})
export class ClientModule { }
et enfin:
// 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 {
}
}
Mais lors de la navigation sur le site, l'erreur suivante apparaît:
Rejet de la promesse non gérée: erreurs d'analyse du modèle: 'alerte' n'est pas un élément connu: 1. Si 'alerte' est un composant Angular, vérifiez qu'il fait partie de ce> module. 2. Si "alert" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au> "@ NgModule.schemas" de ce composant pour supprimer ce message. ("
[ERREUR ->] bonjour
Je fais évidemment quelque chose de mal ici mais quoi?
Vous devriez app.module.ts être comme ça.Il m'aide.
// 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 { }
Et changez client-info.component.ts en ceci
// 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 {
}
}
La réponse de dilvish.john a fonctionné pour moi, sauf que dans mon composant.t je devais mettre
import { AlertModule } from 'ng2-bootstrap/alert';
Mais je ne comprends pas la logique derrière: pourquoi dans l'app.module, nous devions importer le "ng2-bootstrap/ng-2bootstrap" et dans le composant, nous devions importer "ng2-bootstrap/alert"?
1- Ng2BootstrapModule n'est-il pas disponible pour tous les composants puisque nous l'avons importé dans app.module? et donc AlertModule devrait être disponible sans le spécifier explicitement
2- et si nous devrions le faire explicitement dans le composant, ne devrions-nous pas utiliser import from 'Ng2BootstrapModule/alert'?
Je vous remercie,