ng-table & yeoman - sorting works fine in development but breaks in production

Question

This is probably something silly, but I just can't figure it out.

I am using:

• angularJS (1.4.7)
• the yeoman generator-angular (0.12.1) (without Sass)
• ng-table (0.8.3)

When I run 'grunt serve' during development, the table works perfectly. But when I run 'grunt' and use the dist folder, the columns are no longer sortable. It seems the class 'sortable' is not applied to the header cells in the production version, whereas it is in development.

Any help would be most appreciated.

Controller:

angular.module('couponWebApp').controller('MainCtrl', ['NgTableParams', 'couponService',

    function(NgTableParams, couponService) {

        var PAGE_SIZE = 10;
        var lastPage = 2;
        var lastPageDiscovered = false;
        var self = this;

        self.tableParams = new NgTableParams({}, {
            counts: [], // we don't want to display other page count options
            getData: function(params) {
                var currentdata = params.data;
                return couponService.getAllBatches(PAGE_SIZE, params.page()).then(function(payload) {
                    if (payload.length < 1) { // no data for this page
                        lastPageDiscovered = true;
                        lastPage = params.page() - 1;
                        params.total(params.page() - 1);
                        return currentdata;
                    } else if (payload.length < PAGE_SIZE) { // payload is smaller than page size
                        lastPage = params.page();
                        lastPageDiscovered = true;
                        params.total(lastPage);
                        return payload;
                    } else { // payload is equal to the page size
                        lastPage = (lastPageDiscovered ? lastPage : params.page() + 1);
                        params.total(lastPage);
                        return payload;
                    }
                }, function() {
                    // error
                });
            }
        });
    }
]);

View:

<table ng-table="main.tableParams" class="table table-striped" show-filter="false">
    <tbody>
    <tr ng-repeat="item in $data">
      <td data-title="'Name'" sortable="'name'">
        {{item.name}}
      </td>
      <td data-title="'Created'" sortable="'createDate'">
        {{item.createDate | date: 'dd MMMM YYYY'}}
      </td>
      <td title="'Expiry Date'"sortable="'expiryDate'">
        {{item.expiryDate | date: 'short'}}
      </td>
      <td title="'Created'" filter="{ vouchersCreated: 'number'}">
        {{item.vouchersCreated}}
      </td>
    </tr>
    </tbody>
  </table>
</div>

Answer 1

This may be helpful. There can be many reasons for it to fail. As I don't the exact reason. I am giving the fix for the most common issue.
Change collapseBooleanAttributes to false in the "htmlmin" task in the Gruntfile. The configuration will look similar to this.

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: false,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/{,*/}*.html', 'app_components/{,**/}*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    }