Assets missing in Angular application built using grunt

Question

I have built an application using Yeoman and AngularJS (and all the stuff that goes along with it like Grunt and Bower).

It all works perfectly when running locally using grunt serve. However, after running grunt and deploying the application, there are a couple of missing assets and I'm not sure what the best way to solve it is.

Firstly, running Grunt seems to copy the images across to dist but it renames them without adjusting the references in the CSS. app/images/uparrow.png becomes dist/images/3f84644a.uparrow.png.

Here is a line from the main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

When it is compiled to CSS during the build process, it doesn't rewrite the path so the browser tries to load dist/images/uparrow.png which is missing.

Secondly, there is an issue with loading the fonts for the Bootstrap plugin. The bootstrap CSS at app/bower_components/bootstrap/dist/css/bootstrap.css references ../fonts/glyphicons-halflings-regular.woff. The relative path gets resolved to app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof and that works perfectly.

Once built though, the vendor CSS gets combined and minified into a single CSS file at dist/styles/8727a602.vendor.css. The relative path to the font doesn't get rewritten though. So it tries to look for fonts in the dist/fonts folder, rather than dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof where the file actually is.

Any advice much appreciated.

Answer 1

You are facing Yeoman bugs with the build task which are not fixed yet. I believe there are no clean solutions so here are a few workarounds.

First, image rev:

Just remove images from the rev task and you will be good to go.

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
        '<%= yeoman.dist %>/styles/fonts/*'
      ]
    }
  }
},

Secondly, bootstrap-sass fonts are not copied to the dist folder. I spent hours on this bug and couldn't find a proper solution. Finally I decided to add a new rule to the copy task:

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>/fonts',
      src: ['bower_components/sass-bootstrap/fonts/*.*']
    }]
  },
  ...
}

Run grunt build again after these changes and it should work.