9

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

在处理了许多其他小问题之后,我遇到了一些问题:

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

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

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

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

我花了很多时间尝试各种事情来查看问题可能是什么,但最终按照我下面的答案中的描述进行了追踪。

4

1 回答 1

13

我的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));
});

有关其他优化标志的更多信息,请参阅此处的文档。

于 2014-09-17T21:30:01.877 回答