angularjs - कर्कश के साथ html5 मोड काम नहीं कर रहा है




gruntjs (3)

कर्कश फाइल में, लाइवरेलोड ब्लॉक इस तरह दिखता है:

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

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

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

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


Answers

मुझे विश्वास है कि डॉट समस्या सामान्य समस्या का एक साइड इफेक्ट है। एक ही सेटअप, अधिक या कम है मैं बस इस तरह .config() में html5Mode रीसेट:

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

ऐप अभी भी सभी यूआरएल को #/ डिवेलपमेंट मोड के साथ प्रीफिक्स करेगा, यूआरएल बनाने, लिंक करने और लाइवरेलोड को दर्द देगा। यह एक छोटे निर्देश द्वारा हल किया गया है जो /#/urls नियमित /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> द्वारा किया जा सकता है

अंत में मैं .htaccess उपयोग https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode पर से अनुप्रेषित करता हूं उत्पादन सर्वर

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]

मैं इस दृष्टिकोण का उपयोग कई अंगुलजों + कर्कश परियोजनाओं में करता हूं। यह लाइयरेलोड को तोड़ने से रोकता है, यानी जब मैं Ctrl - S दबाता हूं तो पृष्ठ ताज़ा हो जाता है, और मैं कहीं भी सही यूआरएल का उपयोग कर सकता हूँ मुझे लगता है कि कोई भी उत्पादन मोड में उपसर्ग या हैश करने में रूचि नहीं रखता है।


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

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

लिनक्स में आप इसे कमांड के साथ ठीक करते हैं:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p




angularjs gruntjs