3
votes

Importation de Boostrap4 dans la CLI angular2

J'apprends la CLI Angular2 dans mon http: // localhost: 4200 / . J'ai suivi https://cli.angular.io/ le tutoriel et installé Angular2 avec succès.

I avoir le problème avec l'importation de bootstrap4 css dans ce domaine. J'ai essayé le code suivant dans mon fichier src / angular.json .

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>      
    </ul>
  </div>
</nav>

J'ai ajouté l'exemple de barre de navigation bootstrap dans mon application .component.html

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.css",
  "src/assets/css/bootstrap.min.css",
  "src/assets/css/style.css"
],
"scripts": [
  "src/assets/js/jquery.min.js",
  "src/assets/js/bootstrap.min.js"
],

J'obtiens l'erreur [WDS] Disconnected! dans ma section locale.

J'ai essayé d'ajouter import 'src / assets / css / bootstrap.css'; dans mon style.css mais il fonctionne comme un style en ligne qui n'obtient pas la sortie souhaitée.

Si j'ai essayé d'inclure l'en-tête index.html en utilisant ça marche mais je ne veux pas utiliser cette méthode. Toute aide serait appréciée. Merci d'avance.

javascript angular html css bootstrap-4

4 commentaires

avez-vous essayé de changer le chemin du fichier css dans le fichier app.component.ts. styleUrls: ['path_to_css_file']

@LahiruMirihagoda J'ai presque tout réussi en réinstallant angular-cli sauf l'erreur [WDS] Disconnected! dans Firefox.

Je ne pense pas que cela ait quoi que ce soit à voir avec le CSS. Donc, si vous pouvez consulter ce lien github.com/angular/angular-cli/issues/4839

@LahiruMirihagoda Je ne comprends pas le lien github. Quoi qu'il en soit, merci pour votre temps.

3 Réponses :

0
votes

Je sais que cela ne répond pas à 100% à votre question, mais si vous prévoyez d'utiliser Bootstrap dans votre projet Angular, je vous recommande d'utiliser ng-bootstrap à la place, car il est entièrement compatible avec Angular, et surtout, il n'est pas nécessaire d'installer Jquery.

1) Pour l'installer, exécutez simplement npm i @ ng-bootstrap / ng-bootstrap

2) Pour installer des composants Bootstrap tels que des modaux et des alertes dans votre composant, vous pouvez simplement importer les modules Bootstrap requis dans votre module en faisant ceci: import {NgbAlertModule} depuis '@ ng-bootstrap / ng- bootstrap ';

4 commentaires

Désolé, je ne veux pas utiliser ng-bootstrap .

@Saravana comprend. Quoi qu'il en soit, j'ai utilisé une approche similaire à la vôtre pour installer le bootstrap css. Je l'ai extrait et inclus dans styles de angular.json . Il ne devrait y avoir aucun problème.

D'accord. Je vais essayer de réinstaller à nouveau.

Erreur [WDS] Déconnecté! . savez-vous comment résoudre ce problème?

0
votes

Faites

npm install bootstrap

et importez-le du dossier des modules de nœuds dans votre style.css

7 commentaires

Cette méthode a installé tous les fichiers dist, y compris de nombreuses bibliothèques.

importez simplement le fichier bootstrap.min.css, devrait être dans dist / assets / css /

J'ai essayé. Mais il installera toutes les bibliothèques bootstrap comme _scss

Erreur [WDS] Déconnecté! . savez-vous comment résoudre ce problème?

WDS: Webpack Developer Server, si cela s'est produit après l'importation du bootstrap, vérifiez votre importation et archivez également les outils de développement de la console et de Chrome pour tous les journaux d'erreurs.

Ce n'est pas une réponse, mais PAS mettre le css dans le répertoire des actifs. Angular minimise tous les .css dans un .css unique, (et copie le fichier d'actifs). Vous n'avez donc pas besoin d'exporter aussi

@AdityaThakur Ce problème avec Firefox uniquement

3
votes

Essayez cette commande,

"script:["/node_modules/jquery/dist/jquery.js"]`and ["node_modules/bootstrap/dist/ js/boostrap.js"`]

Après avoir édité le fichier Angular.json, modifiez `" style "

["node_modules/bootstrap/dist/css/bootstrap.css"]`

npm install bootstrap@4 jquery --save

0 commentaires