Search code examples
angularjsglyphiconsangular-bootstrap

Missing fonts/glyphicons-halflings-regular.* when upgrading angular-bootstrap

I am using Yeoman and the cg-angular generator to scaffold an angular app. This was initially working fine, but I recently upgraded angular-bootstrap from 0.10 to 0.11 to get hold of a new feature regarding modal sizes. After doing this I noticed that I get the following errors in the developer console on Chrome. 

GET http://localhost:9001/fonts/glyphicons-halflings-regular.woff  angular-ui-router.js:3702 
GET http://localhost:9001/fonts/glyphicons-halflings-regular.ttf   :9001/fonts/glyphicons-halflings-regular.ttf:1

I am using version 3.1.1 of bootstrap.

If I upgrade bootstrap to the latest which is 3.3.4. Then I get some different errors:

GET http://fonts/glyphicons-halflings-regular.woff2 net::ERR_NAME_NOT_RESOLVED angular-animate.js:442
GET http://fonts/glyphicons-halflings-regular.woff  net::ERR_NAME_NOT_RESOLVED fonts/glyphicons-halflings-regular.woff:1
GET http://fonts/glyphicons-halflings-regular.ttf   net::ERR_NAME_NOT_RESOLVED fonts/glyphicons-halflings-regular.ttf:1

I should say that I am seeing these errors when running locally with grunt serve

Also, if I upgrade boostrap, but keep angular-bootstrap at 0.10 then I don't have these problems.

I also, have the following my Gruntfile.js:

copy: {
        main: {
            files: [
                {src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true},
                {src: ['bower_components/bootstrap/fonts/**'], dest: 'dist/', filter: 'isFile', expand: true}
            ]
        }
    }

Although, like I said I am seeing these missing glyphicons when running locally, so this grunt task shouldn't be coming in to play.

I've grepped through the angular-bootstrap code and what is confusing is that there doesn't seem to be any direct references to the glyphicon fonts in their code, so it's a bit odd how upgrading this module could cause these errors.

Has anyone else had any issues with glyphicons when upgrading angular-bootstrap?

Solution

  • The less compilation happens in the browser when you're running the site with grunt serve so the default path for the fonts (../fonts/) is not relative to the bootstrap less files. To fix it just override the font path (in app.less by default)

    @icon-font-path: "bower_components/bootstrap/fonts/";

    Maybe something in angular-bootstrap started using glyphicons in 0.11 that's why you see this after upgrade.