javascript - 如何使用 AngularJS 从自定义 URL 获取字体？

Question

我关注这个 documentation使用 BootStrap 日期选择器。

这是我的 HTML header :

    <!--jquery & jquery cookie-->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jquery-cookie/jquery.cookie.js"></script>

    <!--bootstrap-->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

    <!--font-awesome-->
    <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">

    <!--summernote-->
    <link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
    <link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">
    <script src="/node_modules/summernote/dist/summernote.min.js"></script>


    <!--angular-->
    <!--Note: for debugging purpose use non-minified angular, need to use angular.min.js for production-->
    <script src="/node_modules/angular/angular.js"></script>
    <!--<script src="/node_modules/angular/angular.min.js"></script>-->
    <script src="/node_modules/angular-resource/angular-resource.min.js"></script>
    <script src="/node_modules/angular-route/angular-route.min.js"></script>
    <script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>

    <!--angular-summernote-->
    <script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>


    <!--angular-bootstrap-->
    <script src="/node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <link rel="stylesheet" href="/node_modules/angular-bootstrap/ui-bootstrap-csp.css">

添加选择器时，出现以下错误:

jquery.js:5246 GET http://localhost:8888/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 (anonymous function) @ jquery.js:5246n.fn.extend.domManip @ jquery.js:5414n.fn.extend.after @ jquery.js:5244domInsert @ angular.js:5010$AnimateProvider.$get.enter @ angular.js:5173(anonymous function) @ angular.js:23761publicLinkFn @ angular.js:7408$get.boundTranscludeFn @ angular.js:7553controllersBoundTransclude @ angular.js:8169ngIfWatchAction @ angular.js:23752$get.Scope.$digest @ angular.js:15667$get.Scope.$apply @ angular.js:15935(anonymous function) @ angular.js:23244n.event.dispatch @ jquery.js:4435n.event.add.r.handle @ jquery.js:4121
public/fonts/bootstrap/glyphicons-halflings-regular.woff:1 GET http://localhost:8888/public/fonts/bootstrap/glyphicons-halflings-regular.woff 
public/fonts/bootstrap/glyphicons-halflings-regular.ttf:1 GET http://localhost:8888/public/fonts/bootstrap/glyphicons-halflings-regular.ttf 

我没有 public/fonts/bootstrap文件夹，但我确实有一个到 node_modules/bootstrap 的静态路由器文件夹。

如何在不移动文件夹的情况下使用它？

我的文件夹结构:

/root
    /server
        /blog
    /client
        /blog
    /public
        /script
        /style
        /image
        /blog
    /node_modules
        /angular
        /bootstrap
        /etc

Answer 1

您可能没有复制 Bootstrap 字体。一些第三方库假定字体存在于 /public 下。 .

如果您使用 gulp，这里有一个从 node_modules 复制字体的虚拟任务至public :

gulp.task('copy:font', function() {
    return gulp.src('/node_modules/bootstrap-sass/assets/fonts/**')
        .pipe(gulp.dest('/public/fonts'))
})