升级 angular-bootstrap 时缺少字体/glyphicons-halflings-regular.*

Question

我正在使用 Yeoman 和 cg-angular 生成器来搭建 Angular 应用程序。这最初工作正常，但我最近将 angular-bootstrap 从 0.10 升级到 0.11 以获得有关模态尺寸的新功能。这样做之后，我注意到我在 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

我使用的是bootstrap 的版本3.1.1。

如果我将bootstrap 升级到最新的3.3.4。然后我得到一些不同的错误：

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

我应该说我在使用 grunt serve 在本地运行时看到了这些错误

另外，如果我升级boostrap，但将angular-bootstrap 保留在0.10，那么我就不会有这些问题。

我也有以下我的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}
            ]
        }
    }

虽然，就像我说的，我在本地运行时看到了这些丢失的字形图标，所以这个繁重的任务不应该发挥作用。

我已经浏览了angular-bootstrap 代码，令人困惑的是，他们的代码中似乎没有直接引用字形字体，所以升级这个模块会导致这些错误有点奇怪.

在升级angular-bootstrap 时，其他人是否遇到过字形图标问题？

Answer 1

当您使用 grunt serve 运行站点时，浏览器中会发生较少的编译，因此字体的默认路径 (../fonts/) 与 bootstrap less 文件无关。要修复它，只需覆盖字体路径（默认为app.less）

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

也许 angular-bootstrap 中的某些内容在 0.11 中开始使用 glyphicons，这就是您在升级后看到此内容的原因。