gulp-minify-html rimuove gli attributi HTML vuoti, causando problemi per le app Angolari

Question

Recentemente ho convertito un'app AngularJS per utilizzare Browserify e allo stesso tempo stavo passando da Mimosa a Gulp come sistema di compilazione.

Dopo aver affrontato molte altre questioni piccole, sono stato lasciato con qualche problema:

1. ho continuato a ottenere il seguente errore nel mio index.html quando si utilizza ng-switch e ng-switch-quando:

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

2. ng-includere non stava lavorando per me (nessun messaggio di errore, proprio niente ottenuto incluso e non sono stati rilasciati richieste di rete).

3. Il codice in uno dei miei attributi personalizzati non è mai stato chiamato, anche se era chiaramente parte del tag HTML nel mio file index.html originale.

Ho passato molto tempo a provare varie cose per vedere quale potrebbe essere il problema, ma alla fine l'ho rintracciato come descritto nella mia risposta di seguito.

Answer 1

Parte del mio gulpfile.js usato gulp-minify-html al minify il codice HTML. Risulta che, per impostazione predefinita, gulp-minify-html rimuove gli attributi vuoti dall'HTML. Questo è ovviamente mortale per le app Angular.

Di conseguenza, ng-switch, ng-include e il mio attributo personalizzato sono stati completamente rimossi dall'HTML minorato e quindi il messaggio di errore angolare era esattamente corretto nel caso ng-switch.

Per risolvere il problema, ho semplicemente modificato la regola del Gulp per passare {empty:true} nelle opzioni a minifyHTML(), che significa "non rimuovere attributi vuoti". Il mio compito gulp ora assomiglia a questo:

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 per ulteriori informazioni su altri flag di ottimizzazione.