AngularJS: не удается получить URL-адреса режима html5 с ui-route $state

Я использую ui-router для управления состоянием, но я думаю, что у меня возникают проблемы с моими правилами перезаписи htaccess. Все мои состояния работали при использовании URL-адресов/#/account style. Теперь я включил режим html5, но мое приложение не выполняет рендеринг, как раньше. Кажется, загружает мой index.html и все мои js и css файлы и т.д., Но на самом деле не инициализирует никаких состояний.

Вот моя структура папок:

root/
    app/
        components/
            angular/
            ...
        images/
        scripts/ 
            controllers/
            directives/
            ...
            app.js       
        styles/
        views/
        .htaccess
        ...

My vhosts DocumentRoot указывает на мой app/

Вот мой app.js с моими состояниями:

'use strict';

angular.module('appointeddPortalApp',  ['ngResource', 'ui.state', 'ui.compat', 'fundoo.services', 'ui.date', 'ngCookies'])
.config(function ($stateProvider, $routeProvider, $locationProvider, $httpProvider) {

    var access = routingConfig.accessLevels;

    delete $httpProvider.defaults.headers.common["X-Requested-With"];
    $httpProvider.defaults.useXDomain = true;
    $locationProvider.html5Mode(true);

    $stateProvider
    .state('root', {
        abstract: true,
        url: '',
        views: {
            'header': {
                templateUrl: 'views/partials/header.html'
            },
            'search': {
                templateUrl: 'views/partials/search.html',
                controller: 'SearchCtrl'
            },
            'main': {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            },
            'footer': {
                templateUrl: 'views/partials/footer.html'
            },
        },
    })
    .state('root.home', {
        url: '',
        views: {
            'content': {
                templateUrl: 'views/home/index.html',
                controller: 'MainCtrl',
            }
        },
        access: access.anon
    })
    .state('root.about', {
        url: '/about',
        parent: 'root',
        views: {
            'content': {
                templateUrl: 'views/about.html',
                controller: 'StaticCtrl'
            },
            '[email protected]': {}
        },
        access: access.anon
    })
    .state('root.search', {
        url: '/search/:city/:category',
        views: {
            'content': {
                templateUrl: 'views/search.html',
                controller: 'SearchCtrl'
            }
        },
        access: access.anon
    })
    .state('root.salons_profile', {
        url: '/salons/{id}',
        views: {
            'content': {
                templateUrl: 'views/salons.profile.html',
                controller: 'SalonCtrl',
            },
            '[email protected]': {}
        },
        access: access.anon
    })
    .state('root.account', {
        url: '/account',
        abstract: true,
        views: {
            'content': {
                templateUrl: 'views/user/account.html',
                controller: 'AccountCtrl'
            }
        },
    })
    .state('root.account.info', {
        url: '',
        views: {
            'account_head': {
                templateUrl: 'views/user/account.head.html',
            },
            'account_body': {
                templateUrl: 'views/user/account.my_appointedd.html',
            },
        },
        menus: {
            'account': {
                identifier: 'my_appointedd',
                class: 'active'
            }
        },
        access: access.user
    })
    .state('root.account.appointments', {
        url: '/appointments',
        views: {
            'account_head': {
                templateUrl: 'views/user/account.head.html',
            },
            'account_body': {
                templateUrl: 'views/user/account.appointments.html',
            },
        },
        menus: {
            'account': {
                identifier: 'appointments',
                class: 'active'
            }
        },
        access: access.user
    })
    .state('root.account.details', {
        abstract: true,
        views: {
            'account_head': {
                templateUrl: 'views/user/account.head.html',
            },
            'account_body': {
                templateUrl: 'views/user/account.details.html',
            },
        },
        access: access.user
    })
    .state('root.account.details.account', {
        url: '/details',
        views: {
            'right': {
                templateUrl: 'views/user/account.details.account.html',
            },
        },
        menus: {
            'account': {
                identifier: 'details',
                class: 'active'
            },
            'settings': {
                identifier: 'account',
                class: 'active'
            }
        },
        access: access.user
    })
    .state('root.account.details.profile', {
        url: '/profile',
        views: {
            'right': {
                templateUrl: 'views/user/account.details.profile.html',
            },
        },
        menus: {
            'account': {
                identifier: 'details',
                class: 'active'
            },
            'settings': {
                identifier: 'profile',
                class: 'active'
            }
        },
        access: access.user
    });


})
.run( [ '$location', '$state', '$stateParams', '$rootScope', '$cookies', 'Auth', function( $location, $state, $stateParams, $rootScope, $cookies, Auth){

    $rootScope.client_id = '51a741eb3152c3ae7e000103';
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.$cookies = $cookies;

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
        if (!Auth.authorize(toState.access)) {
            if(Auth.isLoggedIn()) $state.transitionTo('root.account');
            else                  $state.transitionTo('root.home');
        }
    });

Вот мой код перезаписи, который находится в .htaccess в /app. Я думаю, что это может быть неправильно.

<IfModule mod_rewrite.c>
  Options +FollowSymLinks 
  RewriteEngine On 
  RewriteBase / 
  RewriteRule ^(components|images|scripts|styles|views)($|/) - [L]
  RewriteRule ^(.*)$ index.html [L]
</IfModule>

Ответ 1

Эта конфигурация работает для многих наших пользователей Apache, используя html5mode и ui-router.

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        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]
    </Directory>
</VirtualHost>

Также убедитесь, что вы не являетесь жертвой ошибки <base href>. Для получения дополнительной информации см. ui-router FAQ.

Ответ 2

Если вы работаете на общем хостинге, который не позволяет редактировать конфигурацию Apache, вы можете установить это в своем файле .htaccess, чтобы сделать работу $locationProvider.html5Mode(true) (как @Shanimal указана в ответе @nfiniteloop):

RewriteEngine on

RewriteBase /path/to/app #change this!

# 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]

И не забудьте добавить <base href="/path/to/app/"> в HTML <head>.