gulp-minify-html removes empty HTML attributes, causing problems for Angular apps

Question

I was recently converting an AngularJS app to use Browserify, and at the same time, I was switching from Mimosa to Gulp as my build system.

After dealing with many other little issues, I was left with a few problems:

1. I kept getting the following error in my index.html when using ng-switch and ng-switch-when:

   Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

2. ng-include was not working for me (no error messages, just nothing got included and no network requests were issued).

3. The code in one of my custom attributes was never being called, even though it was clearly part of the HTML tag in my original index.html file.

I spent a lot of time trying various things to see what the problem might be, but eventually tracked it down as described in my answer below.

Caraway

Answer 1

Part of my gulpfile.js used gulp-minify-html to minify the HTML. It turns out that, by default, gulp-minify-html removes empty attributes from the HTML. This is obviously deadly for Angular apps.

As a result, ng-switch, ng-include and my custom attribute were being completely removed from the minified HTML, and therefore the Angular error message was exactly correct in the ng-switch case.

To fix it, I simply changed my gulp rule to pass {empty:true} in the options to minifyHTML(), which means "do not strip empty attributes". My gulp task now looks like this:

var minifyHTML = require('gulp-minify-html');

gulp.task('htmlmin', function() {
   var htmlSrc = './app/index.html',
   htmlDst = './public/';
   var opts = {empty: true};

   gulp.src(htmlSrc)
      .pipe(changed(htmlDst))
      .pipe(minifyHTML(opts))
      .pipe(gulp.dest(htmlDst));
});

See the documentation here for more information on other optimization flags.

Caraway