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']
Vous devez importer
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
à votre index.html
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
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"
],
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:
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
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>
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.