How to get font from custom URL with AngularJS?

Question

I follow this documentation to use BootStrap date picker.

This is my 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">

When I add the picker, I got the following error:

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 

I don't have public/fonts/bootstrap folder, but I do have a static router to node_modules/bootstrap folder.

How can I use it without moving the folder?

My folder structure:

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

Answer 1

You probably didn't copy over bootstrap fonts. Some third party libs assumes the fonts exist under /public .

If you are using gulp, here's a dummy task to copy font from node_modules to public :

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