Bootstrap Glyphicons not displaying in angular2

Question

I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --save My code snippet is

Answer 1

if you include bootstrap files through styleUrls this will make an issue, I don't know why, but I found that the borwser looks at different location for 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]
})

using above method for calling bootstrap stylesheet file causes following error "GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff "

what you can see from the error is that the browser is looking at localhost:4200/fonts/... where it should be localhost:4200/vendor/bootstrap/dist/fonts/...

anyway, a workaround is to make sure that you added the dist folder of bootstrap inside angular-cli-build.js file in vendorNpmFiles array as 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' and remove bootstrap stylesheet from styleUrls.

then add to the index.html the following line:

dont forget to ng serve or ng build