web-dev-qa-db-fra.com

ng-bootstrap ne fonctionne pas dans angular 4

Je suis nouveau avec angular 4, j'essaye de configurer bootstrap. J'ai installé ng-bootstrap:

https://ng-bootstrap.github.io/#/getting-started

J'ai bien aimé tous sur la page, mais je ne vois pas le bootstrap sur ma page. Voici mon code:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
   BrowserModule,
   FormsModule,  // add  this
   NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> You successfully read this important alert 
   message.
</div>

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

J'ai aussi essayé du code dans le fichier index.html, mais cela ne fonctionne pas,

pour cette ligne, je m'attends à voir de la couleur:

<h1 class="text-primary">{{title}} </h1>

Je ne trouve aucune référence à bootstrap lorsque je vérifie l'en-tête du code HTML. Toute aide, s'il vous plaît? Merci

twitter-bootstrapangularbootstrap-4ng-bootstrapangular4-forms
15
MarcosF8

Dans la page que vous avez mentionnée, ng-bootstrap mentionne bootstrap CSS en tant que dépendance. Il est donc chargé séparément.

Si vous utilisez Angular CLI pour créer votre application, vous pouvez suivre ce guide officiel pour l’ajouter,

Mise à jour:

Comme mentionné dans le commentaire, l'ajout du CSS à styles dans .angular-cli.json _ (ou toute autre modification apportée à ce fichier) vous obligera à redémarrer votre ng serve ou ng build --watch _ si vous avez déjà exécuté.

Mise à jour 2:

Pour Angular 6 et supérieur, vous pouvez utiliser cette solution.

Aller à styles.css et ajoutez cette ligne

@import "~bootstrap/dist/css/bootstrap.css";

Voyez aussi comment cela fonctionne sous le capot:

https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

34
Meligy

Je ne vois aucun composant ng-bootstrap dans votre code! Je pense que vous recherchez bootstrap css, ce qui est également une condition préalable à ng-bootstrap.

Ajouter ces lignes dans index.html entre le <head></head> tag:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
1
Nehal