Режим html5 с сервисом grunt не работает

В файле grunt блок блокировки в вертикальной плоскости выглядит следующим образом:

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= '/' добавлена и html5Mode (true) в config. Есть ли что-нибудь еще, что я могу попробовать? Почему это действительно прекратило работать?

Примечание. Оказывается, что у моего URL-адреса есть точка в нем, и это не так хорошо управляется с помощью правила переписывания mod-mod. Любая идея, как изменить это и позволить ему обрабатывать точку в URL?

Ответ 1

Попробуйте добавить это в корневой модуль приложения в блок конфигурации. Не забудьте включить/вставить $locationProvider.

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

Ответ 2

Я считаю, что проблема с точкой является побочным эффектом общей проблемы. Иметь такую же настройку, более или менее. Я просто reset html5Mode в .config() следующим образом:

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

Приложение по-прежнему будет префикс всех URL-адресов #/ в режиме разработки, что сделает URL-адреса, связывание и оживление боли. Решено это с помощью небольшой директивы, которая изменяет регулярные /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]

Я использую этот подход в нескольких проектах angularjs + grunt. Это предотвращает разрушение печеночной нагрузки, то есть когда я нажимаю Ctrl - S, страница обновляется, и я могу использовать правильные URL-адреса в любом месте. Думаю, никто не заинтересован в префиксах или хешах в режиме производства.