AngularJS html5Mode utilizzando Grunt connect. grunt 0.4.5

Question

Recentemente sono passato a grunt 0.4.5 e ha cambiato il modo in cui funziona connect.

In precedenza ho utilizzato connect-modrewrite e ha funzionato molto bene (ha avuto alcuni problemi con gli URL generati dal parametro /:).

Ecco la vecchia versione che ha funzionato con grunt 0.4.1 dal generatore angolare 0.8.0 con la parte middleware modificata da me per utilizzare html5mode.

connect: { 
    options: { 
     port: 9000, 
     hostname: '*IP HERE*', 
     livereload: 35729, 
     middleware: function (connect, options) { 
      var optBase = (typeof options.base === 'string') ? [options.base] : options.base; 
      return [require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
       optBase.map(function(path){ return connect.static(path); }) 
      ); 
     } 
    }, 
    livereload: { 
     options: { 
      open: true, 
      base: [ 
       '.tmp', 
       '<%= yeoman.app %>' 
      ] 
     } 
    }, 

Ecco la nuova versione da generatore-angolare 0.9.0-1

connect: { 
    options: { 
     port: 9000, 
     hostname: '*IP HERE*', 
     livereload: 35729 
    }, 
    livereload: { 
     options: { 
      open: true, 
      middleware: function (connect) { 
       return [ 
        connect.static('.tmp'), 
        connect().use(
         '/bower_components', 
         connect.static('./bower_components') 
        ), 
        connect.static(appConfig.app) 
       ]; 
      } 
     } 
    }, 

Come posso cambiare questa opzione per utilizzare mod-rewrite o qualsiasi altro metodo per raggiungere html5mode?

Ho provato ad utilizzare il metodo fornito qui: https://gist.github.com/nnarhinen/7719157 ho combinato per creare la seguente:

middleware: function (connect) { 
    return [ 
     connect.static(modRewrite(['^[^\\.]*$ /index.html [L]'])), 
     connect.static('.tmp'), 
     connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
     connect.static(appConfig.app) 
    ]; 
} 

Questo mi permette di visualizzare la vista normale, ma la parte modRewrite non sembra di fare ciò di cui ha bisogno al fine di ottenere qualsiasi altra vista tramite url.

Answer 1

se qualcun altro si imbatte in questo ecco la correzione:

(l'unica linea aggiunto è stato la linea modRewrite)

livereload: { 
    options: { 
     open: true, 
     middleware: function (connect) { 
      return [ 
       modRewrite(['^[^\\.]*$ /index.html [L]']), 
       connect.static('.tmp'), 
       connect().use(
        '/bower_components', 
        connect.static('./bower_components') 
       ), 
       connect.static(appConfig.app) 
      ]; 
     } 
    } 
}, 

Assicurarsi di avere le seguenti dichiarato nella parte superiore del file grugnito :

var modRewrite = require('connect-modrewrite'); 

Answer 2

Ecco la mia soluzione, adattata alle generator-angular di installazione, ma può essere utilizzato ovunque. Permette una sintassi di riscrittura (la parte interessante è l'esempio di configuarione del fegato).

connect: { 
    options: { 
    port: 9000, 
    // Change this to '0.0.0.0' to access the server from outside. 
    hostname: 'localhost', 
    livereload: 35729, 
    // Modrewrite rule, connect.static(path) for each path in target's base 
    middleware: function (connect, options) { 
     var optBase = (typeof options.base === 'string') ? [options.base] : options.base, 
      middleware = [require('connect-modrewrite')(['!(\\..+)$/[L]'])] 
      .concat(optBase.map(function (path) { 
       if (path.indexOf('rewrite|') === -1) { 
       return connect.static(path); 
       } else { 
       path = path.replace(/\\/g, '/').split('|'); 
       return connect().use(path[1], connect.static(path[2])) 
       } 
      })); 

     return middleware; 
    } 
    }, 
    livereload: { 
    options: { 
     open: true, 
     base: [ 
     '.tmp', 
     'rewrite|/bower_components|./bower_components', 
     'rewrite|/app/styles|./app/styles', // for sourcemaps 
     '<%= yeoman.app %>' 
     ] 
    } 
    } 
} 

Answer 3

Considerato come le altre risposte sono piuttosto prolisso e non preservare predefinite grunt-contrib-connect middleware, mi si avvicinò con una soluzione che utilizza dedicated middleware – connect-history-api-fallback:

npm install connect-history-api-fallback --save-dev 

var history = require('connect-history-api-fallback') 
//... 
connect: { 
    options: { 
     middleware: function(connect, options, middleware) { 
      middleware.unshift(history()) 
      return middleware 
     }, 
     //... 
    }, 
    //... 
} 

Answer 4

Sebbene risposta di cui sopra accettata è corretta. Im aggiungendo la configurazione che utilizzo, funziona perfettamente su CentOs.

seguito da 1 a 3 passaggi sono per fare Angularjs lavoro URL pulita nella vostra macchina locale utilizzando $ grunt serve

Ma se si vuole per farli funzionare bene su server, specialmente nginx si dovrà anche aggiornare nginx config . (Punto 4)

1. $ npm install connect-modrewrite --save

2. Modifica i tuoi gruntfile.js.Aggiungere nella parte superiore del file

   var modRewrite = require('connect-modrewrite'); 
   

Poi, nel tuo middleware:

middleware: function (connect) { 
    return [ 
     modRewrite(['^[^\\.]*$ /index.html [L]']), 
     connect.static('.tmp'), 
     connect().use('/bower_components', 
     connect.static('./bower_components')), 
     connect.static(config.app) 
    ]; 
} 

per esempio

// Generated on 2015-11-09 using generator-angular 0.14.0 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 
var modRewrite = require('connect-modrewrite'); 

module.exports = function (grunt) { 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

3.Then andare a Livereload middleware, aggiungere modRewrite

livereload: { 
    options: { 
     middleware: function (connect) { 
      return [ 
       modRewrite([ 
        '^[^\\.]*$ /index.html [L]' 
       ]), 
       connect.static('.tmp'), 
       connect().use('/bower_components', connect.static('./bower_components')), 
       connect.static(config.app) 
      ]; 
     } 
    } 
}, 

4.Edit Nginx config:

server { 
    server_name yoursite.com; 
    root /usr/share/html; 
    index index.html; 

    location/{ 
    try_files $uri $uri/ /index.html; 
    } 
} 

Speranza che aiuta :)