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

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 代码，令人困惑的是，在他们的代码中似乎没有任何直接引用 glyphicon 字体，所以有点奇怪升级此模块可能会导致这些错误。

在升级 angular-bootstrap 时，有没有其他人遇到字形问题？

Answer 1

当您使用 grunt serve 运行网站时，浏览器中发生的编译较少，因此字体的默认路径 (../fonts/) 不是相对于 bootstrap less 文件。要修复它，只需覆盖字体路径(默认情况下在 app.less 中)

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

也许 angular-bootstrap 中的某些东西在 0.11 中开始使用字形图标，这就是为什么您在升级后会看到这个。