AngularJS html5Mode mit Grunt verbinden. grunt 0.4.5

Question

Ich bin kürzlich zu grunt 0.4.5 gewechselt und es hat sich geändert wie connect funktioniert.

Ich verwendete zuvor connect-modrewrite und es funktionierte ziemlich gut (hatte einige Probleme mit URLs generiert von /: Parameter).

Hier ist die alte Version, die mit Grunt 0.4.1 von generator-eckigen 0.8.0 mit der Middleware Teil von mir modded, um html5mode zu verwenden.

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 %>' 
      ] 
     } 
    }, 

Hier ist die neue Version von Generator-Winkel 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) 
       ]; 
      } 
     } 
    }, 

Wie kann ich ändern, diese Mod-Rewrite oder jede andere Methode zu verwenden html5mode zu erreichen?

Ich habe versucht, das Verfahren hier zur Verfügung gestellt mit: https://gist.github.com/nnarhinen/7719157 ich es kombiniert folgendes zu schaffen: me

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) 
    ]; 
} 

Dies ermöglicht die normale Ansicht zu sehen, aber der modrewrite Teil scheint nicht zu tun, was er braucht um über die URL zu einer anderen Ansicht zu gelangen.

Answer 1

Wenn jemand anderes stolpert über dieses hier ist das Update:

(die einzige Linie hinzugefügt war die modrewrite Linie)

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) 
      ]; 
     } 
    } 
}, 

Stellen Sie sicher, dass an der Spitze Ihrer Grunzen-Datei die folgenden erklärt :

Answer 2

Hier ist meine Lösung, angepasst an generator-angular Setup, kann aber überall verwendet werden. Es erlaubt eine Umschreibungssyntax (der interessante Teil ist das Beispiel Liveload-Konfiguration).

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

Bedenkt man, wie andere Antworten ziemlich ausführliche sind und keine Standard grunt-contrib-connect Middle bewahren, kam ich mit Lösung, die dedicated middleware – connect-history-api-fallback verwendet:

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

Obwohl oben akzeptierte Antwort richtig ist. Im Hinzufügen der Config, die ich verwende, funktioniert es perfekt auf CentOs.

Below 1 bis 3 Schritte sind für AngularJS saubere URL Arbeit in Ihrem lokalen Rechner mit $ grunt serve

machen Aber wenn man sie gut laufen auf dem Server vornehmen möchten, speziell nginx Sie müssen auch nginx Konfiguration aktualisieren . (Schritt 4)

1. $ npm install connect-modrewrite --save

2. Bearbeiten Sie Ihre gruntfile.js.Fügen Sie am Anfang der Datei

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

Dann in Ihrem middleware:

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

für z.B.

// 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 gehen Middleware Livereload, fügen 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.Bearbeiten NGINX config:

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

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

Hoffe, es hilft :)