एचटीएमएल 5 मोड काम नहीं कर सर्व

Question

घुरघुराना फ़ाइल में livereload ब्लॉक इस तरह दिखता है:

livereload: { 
    options: { 
    open: true, 
    middleware: function(connect, options, middleware) { 
     var optBase = (typeof options.base === 'string') ? [options.base] : options.base; 
     return [ 
     [require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
      optBase.map(function(path) { 
      return connect.static(path); 
      })), 
     connect.static('.tmp'), 
     connect().use(
      '/bower_components', 
      connect.static('./bower_components') 
     ), 
     connect().use(
      '/app/styles', 
      connect.static('./app/styles') 
     ), 
     connect.static(appConfig.app) 
     ]; 
    } 
    } 
}, 

जोड़ना:

[require('connect-modrewrite')(['!(\\..+)$/[L]'])].concat(
        optBase.map(function(path){ return connect.static(path); })), 

मुझे एचटीएमएल 5 मोड सक्षम करने के लिए काम करने के लिए उपयोग किया था, अन्यथा , मेरे मार्ग # के बिना लोड नहीं करते हैं! जब मैं ब्राउज़र के माध्यम से पुनः लोड करने का प्रयास करता हूं।

मेरे पास आधार href = '/' जोड़ा गया है और html5Mode (सत्य) कॉन्फ़िगरेशन में है। क्या यहां कुछ और है जिसके लिए मैं कोशिश कर सकता हूं? यह वास्तव में काम करना बंद क्यों करेगा?

नोट: यह पता चला है कि मेरे यूआरएल में एक डॉट है और इसे कनेक्ट-मोड रीराइटिट नियम द्वारा बहुत अच्छी तरह से संभाला नहीं जा रहा है। किसी भी विचार को बदलने के लिए और इसे URL में डॉट को संभालने में सक्षम कैसे करें?

Answer 1

कॉन्फ़िगर ब्लॉक में रूट ऐप मॉड्यूल में इसे जोड़ने का प्रयास करें। $ स्थान प्रदाता शामिल/इंजेक्ट करना सुनिश्चित करें।

$locationProvider 
    .html5Mode({ 
    enabled: true, 
    requireBase: false 
    }) 
    .hashPrefix('!'); 

Answer 2

मेरा मानना ​​है कि डॉट समस्या सामान्य समस्या का एक पक्ष प्रभाव है। एक ही सेटअप है, कम या ज्यादा। मैं बस .config() इस तरह में html5Mode रीसेट:

if (window.location.host == 'localhost:9000') { 
    $locationProvider.html5Mode(false); 
    $locationProvider.hashPrefix(''); 
} else { 
    $locationProvider.html5Mode(true); 
} 

एप्लिकेशन को अभी भी विकास मोड में #/ के साथ सभी यूआरएल उपसर्ग होगा, यूआरएल बनाने को जोड़ने और एक दर्द livereload। एक छोटे से निर्देश है कि नियमित रूप बदल जाता है के द्वारा इस हल /urls/#/urls रहे हैं:

var isLocalHost = (location.hostname === "localhost" || location.hostname === "127.0.0.1"); 
angular.module('myApp').directive('debugLink', function($timeout) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $timeout(function() {   
     var href = element.attr('href'); 
     if (href && isLocalHost && href.charAt(0) == '/') { 
      element.attr('href', '#'+href); 
     } 
     }, 100); 
    } 
    } 
}); 

अब जोड़ने के द्वारा <a href="/url" debug-link>link</a>

अंत में किया जा सकता है मैं उत्पादन सर्वर

RewriteEngine on 

# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 

# Rewrite everything else to index.html to allow html5 state links 
RewriteRule^index.html [L] 

पर https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode से .htaccess रीडायरेक्ट का उपयोग करें मैं इस दृष्टिकोण का उपयोग कई कोणीय + ग्रंट परियोजनाओं में करता हूं। यह livereload को तोड़ने से रोकता है, यानी जब मैंने Ctrl - एस पृष्ठ को रीफ्रेश किया गया है, और मैं कहीं भी सही यूआरएल का उपयोग कर सकता हूं। मुझे लगता है कि कोई भी उत्पादन मोड में उपसर्ग या हैंश रखने में रुचि नहीं रखता है।