angularjs - gulp-minify-html 删除空的 HTML 属性，导致 Angular 应用出现问题

Question

我最近正在将 AngularJS 应用程序转换为使用 Browserify，同时，我从 Mimosa 切换到 Gulp 作为我的构建系统。

处理完许多其他小问题后，我剩下了一些问题:

1. 使用 ng-switch 和 ng-switch-when 时，我的 index.html 中不断出现以下错误:

   错误:[$compile:ctreq] 指令“ngSwitchWhen”所需的 Controller “ngSwitch”找不到!

2. ng-include 对我不起作用(没有错误消息，只是没有包含任何内容，也没有发出网络请求)。

3. 我的一个自定义属性中的代码从未被调用，尽管它显然是我原始 index.html 文件中 HTML 标记的一部分。

我花了很多时间尝试各种方法来看看问题可能是什么，但最终按照我下面的答案中的描述找到了问题所在。

Answer 1

我的gulpfile.js的一部分使用gulp-minify-html来缩小HTML。事实证明，默认情况下，gulp-minify-html 会从 HTML 中删除空属性。这对于 Angular 应用来说显然是致命的。

因此，ng-switch、ng-include 和我的自定义属性被从缩小的 HTML 中完全删除，因此 Angular 错误消息在 ng-switch 情况下是完全正确的。

为了解决这个问题，我只是更改了 gulp 规则，将选项中的 {empty:true} 传递给 minifyHTML()，这意味着“不要删除空属性” ”。我的 gulp 任务现在看起来像这样:

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有关其他优化标志的更多信息。