Question

我正在使用Yeoman和cg-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

我正在使用3.1.1的版本bootstrap。

如果我将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字体的直接引用，所以它有点bit如何升级此模块可能会导致这些错误。

升级angular-bootstrap时，是否有其他人对字形有问题？

Answer 1

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

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

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

升级angular-bootstrap

1 个答案: