404 not found error for glyphicons-halflings-regular.ttf/woff/woff2

[yyw1994]

Hi,all

I just followed the course in Lynda "MEAN Stack and MongoDB Development Techniques", when I have installed "gulp" successfully, and run "gulp serve", the browser throws a "404 not found error" for these resources:

http://localhost:3000/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
http://localhost:3000/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
http://localhost:3000/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf

the version of my gulp is

CLI version 3.9.1
Local version 3.9.1

the version of my computer is OS 10.11.6

I have read the other solutions and tried but all failed.

[bertramn]

Had the same problem today, I fixed it by adding the .tmp/serve/fonts output to gulp/build.js so the fonts task looks like this:

// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function () {
  return gulp.src($.mainBowerFiles())
    .pipe($.filter('**/*.{eot,otf,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/fonts/')))
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

Also need to properly override the bootstrap icon font location in the src/app/index.scss file like this:

$icon-font-path: '../fonts/' !default;

Technically you can then also remove the "replace font paths" line from gulp\build.js L54. The file would look like this after edits:

  return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
    .pipe($.inject(partialsInjectFile, partialsInjectOptions))
    .pipe($.useref())
    .pipe(jsFilter)
    .pipe($.sourcemaps.init())
    .pipe($.ngAnnotate())
    .pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe($.rev())
    .pipe($.sourcemaps.write('maps'))
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    // .pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
    .pipe($.cssnano())
    .pipe($.rev())
    .pipe(cssFilter.restore)
    .pipe($.revReplace())
    .pipe(htmlFilter)
   ...

Then just do a gulp serve and it should come good.

[yyw1994]

well, it doesn't work to mine, if part of the path or file content should be different on my computer?

[bertramn]

Not sure to be honest, I used the generator to create a project with angluar 1.5.x, normal JavaScript (no ES6) and SASS stylesheet processor. The 2 files I referenced above are generated by yo and placed at the relative path of the project folder. So if your workspace is at ~/workspaces/generated the 1st file is located at ~/workspaces/generated/gulp/build.js and the other file at ~/workspaces/generated/src/app/index.scss.

[AbdelhadiLahlou]

Hi I had the same problem and changing path in .tmp/serve/index.html is not the solution because it's just a compilation of source/index.html.

The Best SOLUTION that I found is to change path in build.js like this:

.pipe($.replace('../../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))

and in index.scss liek this:

$icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

[blowsie]

@AbdelhadiLahlou this only works for serve and not serve:dist

[blowsie]

@bertramn your solution works for serve:dist and not serve, unless you do step 3

also remove the "replace font paths" line from gulp\build.js

[noob9527]

@bertramn this works for me

after change
$icon-font-path: '../fonts' !default;
to
$icon-font-path: '../fonts/' !default;

[heshamelmasry77]

so what is the solution now for this

[sunilkumarkm]

This solution will work.

In index.scss add $icon-font-path: "../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

In gulp/build.js add .pipe($.replace('../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))

[Henry0422]

I vote for sunilkumarkm's solution.

In index.scss, changed from
$icon-font-path: "../../bootstrap-sass/assets/fonts/bootstrap/";
To
$icon-font-path: "../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

In gulp/build.js, changed from
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
to
.pipe($.replace('../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))