Saya mencoba menggunakan bootstrap glyphicons di aplikasi angular2 saya. Saya telah menginstal bootstrap menggunakan perintah npm install bootstrap --save Potongan kode saya adalah
<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>
Saya telah menyertakan bootstrap dalam styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']
Anda harus mengimpor
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
ke index.html Anda
Ada file angular-cli-build.js dari root proyek jika aplikasi Anda telah di-scaffold oleh angular-cli (menggunakan 'ng init' atau 'ng new').
angular-cli-build.js menginstruksikan build proyek (menggunakan 'ng serve' atau 'ng build') untuk menempatkan pustaka pihak ketiga ke dalam folder vendor.
Ada folder fonts, dalam folder distribusi bootstrap, yang menyimpan file glyphicons. File-file bootstrap tersebut perlu ditempatkan ke dalam folder vendor juga.
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/*'
]
});
};
Untuk kelengkapan, proses setup untuk bootstrap ada pada beberapa langkah di bawah ini:
Garis komando:
npm install bootstrap --save
index.html:
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
Mulai ulang 'ng serve' atau cukup bangun ulang dengan 'ng build'
Berikut adalah hasil dari sumber halaman:
jika Anda menyertakan file bootstrap melalui styleUrls, ini akan membuat masalah, saya tidak tahu mengapa, tetapi saya menemukan bahwa borwser melihat lokasi yang berbeda untuk glyphicons.
@Component({
moduleId: module.id,
selector: 'app-projects',
templateUrl: 'projects.component.html',
styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
providers:[ProjectsService]
})
menggunakan metode di atas untuk memanggil file stylesheet bootstrap menyebabkan kesalahan berikut "GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff "
apa yang dapat Anda lihat dari kesalahan adalah bahwa browser melihat localhost:4200/fonts/...
di mana seharusnya localhost:4200/vendor/bootstrap/dist/fonts/...
bagaimanapun juga, solusinya adalah dengan memastikan bahwa Anda menambahkan folder dist
bootstrap di dalam file angular-cli-build.js
dalam array vendorNpmFiles
sebagai 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'
dan menghapus stylesheet bootstrap dari styleUrls
.
kemudian tambahkan ke index.html baris berikut:
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
jangan lupa untuk ng serve
atau ng build