web-dev-qa-db-fra.com

Glyphicons bootstrap non affichés dans angular2

J'essaie d'utiliser des glyphicons bootstrap dans mon application angular2. J'ai installé bootstrap à l'aide de la commande npm install bootstrap --saveMon extrait de code est 

 <button *ngIf="pos.name == uname" type="button" class="btn btn-default       btn-sm delete" (click)="DeleteBulletin();">
   <span class="glyphicon glyphicon-trash glyph"></span>  Delete
 </button>

J'ai inclus bootstrap dans mon styleUrls - styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

Le glyphicon apparaît comme indiqué-  enter image description here

csstwitter-bootstrapwebangularglyphicons
14
Sahana ys

Vous devez importer 

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

à votre index.html

9
supersonic

Boostrap 4 ne supporte plus Glyphicons, vous pouvez utiliser Font Awesome

npm install --save font-awesome

et ajoutez le fichier css à votre fichier .angular-cli.json

"apps": [
          {
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],

Remplacez la classe CSS par les classes Font Awesome:

<i class="navbar-toggler-icon fa fa-bars"> </i>

application de recompilation: ng serve

5
Sebastian Viereck

J'ai installé bootstrap3 en tant qu'installation npm bootstrap @ 3 et tout a commencé à fonctionner

juste besoin d'ajouter dans angular-cli.json: -

   "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],
4
Shobhit

Il existe un fichier angular-cli-build.js contenant la racine du projet si votre application a été scaffoldée par angular-cli (avec 'ng init' ou 'ng new').

angular-cli-build.js indique à la construction du projet (avec 'ng serve' ou 'ng build') de placer les bibliothèques tierces dans le dossier vendor.

Il y a le dossier fonts dans le dossier de distribution bootstrap, contenant les fichiers glyphicons. Ces fichiers d'amorçage doivent également être placés dans le dossier du fournisseur. 

angular-cli-build.js: 

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.min.css',
      'bootstrap/dist/fonts/*'
    ]
  });
};

Pour être complet, le processus d’installation du bootstrap était l’une des étapes ci-dessous:

Ligne Commnad:

npm install bootstrap --save

index.html:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Redémarrez 'ng serve' ou reconstruisez simplement avec 'ng build' 

Voici le résultat de la source de la page:

 Glyphicon with trach glyph

3
David

si vous incluez des fichiers d'amorçage via styleUrls, cela posera un problème, je ne sais pas pourquoi, mais j'ai constaté que le navigateur recherche un emplacement différent pour les glyphiques.

@Component({
   moduleId: module.id,
   selector: 'app-projects',
   templateUrl: 'projects.component.html',
   styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
   providers:[ProjectsService]
})

l'utilisation de la méthode ci-dessus pour appeler le fichier de feuille de style bootstrap provoque l'erreur suivante "GET http: // localhost: 4200/fonts/glyphicons-halflings-regular.woff "

ce que vous pouvez voir de l'erreur, c'est que le navigateur regarde localhost:4200/fonts/... où il devrait être localhost:4200/vendor/bootstrap/dist/fonts/...

dans tous les cas, une solution consiste à vérifier que vous avez ajouté le dossier dist de bootstrap dans le fichier angular-cli-build.js du tableau vendorNpmFiles en tant que 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' et à supprimer la feuille de style bootstrap de styleUrls.

ajoutez ensuite à l'index.html la ligne suivante:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

n'oubliez pas de ng serve ou ng build

1
AliAwwad

Si vous utilisez Bootstrap 4, il n’inclut pas glyphicon dans la version autonome . Vous devez donc utiliser un autre package d’icônes tel que FontAwesome ou installer les glyphiques séparément.

J'utilise FontAwesome et ses dépendances dans mes cas:

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "TypeScript": "~2.4.2"
  }

Dans les modèles HTML, placez simplement un code comme celui-ci:

<i class="fa fa-refresh" aria-hidden="true"></i>
1
Pax Beach

S'il vous plaît courir 

npm install glyphicons --save

et que s'il vous plaît importer des glyphiques dans votre composant

 import icons from 'glyphicons';
    var icons = require('glyphicons');
    console.info('This is' + icons.heart+ ' Glyphicons!')

Vous pouvez vérifier une fois dans la console de votre navigateur.

0
Samudrala Ramu