Angularjs - Как удалить # из URL-адреса - Ошибка: не удалось выполнить pushState для "History":

Я попробовал все в других сообщениях относительно удаления идентификатора фрагмента (#). Все работает как надо с идентификатором #, но это было бы хорошим улучшением для моего проекта.

  1. Я настроил $locationProvider и установил для html5Mode значение true
  2. Установить <base href="app" /> в моем index.html пробовал также <base href="/" />, я использовал <base href="/" />
  3. Без установки базы requireBase: false,
  4. Упаковка $locationProvider.html5Mode(true) в if(window.history && window.history.pushState) проверить поддержку браузера для API истории html5, как кто-то предложил
  5. Я написал правило в web.config, как кто-то другой предложил.
  6. Я перепробовал все, что смог найти после того, как гуглил.

Я получаю эту ошибку:

angular.js: 13708 Ошибка: не удалось выполнить "pushState" для "History": объект документа истории с URL " http://sales/?_ijt=d1r1ladp5ro1tvflefsdpnfvd4 " не может быть создан в документе с происхождением " http://localhost:52471/ 'и URL' http://localhost:52471/BeerbayCRM/BeerbayCRM/app/index.html?_ijt=d1r1ladp5ro1tvflefsdpnfvd4 '.

Смотрите список доступных переменных окружения. Ваша помощь будет высоко оценена! Спасибо.

Вот мой код:

app.config(['$routeProvider', '$locationProvider', '$httpProvider',
  function($routeProvider, $locationProvider) {

    $routeProvider
      .when('/', {
        templateUrl: "views/productsView.html"
      })
      .when("/products", {
        templateUrl: "views/productsView.html"
      })
      .when("/sales", {
        templateUrl: "views/salesView.html"
      })
      .when("/charts", {
        templateUrl: "views/chartsView.html"
      })
      .otherwise({
        templateUrl: "views/productsView.html"

      });

    if (window.history && window.history.pushState) {

      $locationProvider.html5Mode({
        enabled: true
      });
    }
  }
])

.controller("routeCtrl", function($scope, $location) {
  $scope.setRoute = function(route) {
    $location.path(route);
  }
});
<!DOCTYPE html>
<html ng-app="myApp">

<head>

  <!--.....all the dependencies are here.....-->

  <base href="app" />

</head>

<body ng-controller="myAppCtrl">
  <div class="navbar navbar-inverse">
    <a class="navbar-brand" href="#">Beerbay</a>
  </div>
  <div ng-controller="routeCtrl" class="col-sm-1">
    <a ng-click="setRoute('products')" class="btn btn-block btn-primary btn-lg">Products</a>
    <a ng-click="setRoute('sales')" class="btn btn-block btn-primary btn-lg">Sales</a>
    <a ng-click="setRoute('charts')" class="btn btn-block btn-primary btn-lg">Charts</a>
  </div>
  <ng-view/>
</body>

</html>

Обновление: оно частично работает после того, как я запустил приложение на узле-сервере, отдельном от одного WebStorm. После того, как я нажал обновить страницу, я получил короткое сообщение на странице: "Cannot GET /...__partial view name* "

Источник

1 ответ

Вам нужно иметь перенаправления на стороне сервера на месте... когда сервер получает запрос для example.com/yoursite/some-page по умолчанию, он просто пытается загрузить индексные файлы из этого места, когда он не находит их будет 404. Вам нужно настроить перенаправление на стороне сервера в конфигурации веб-сервера, чтобы любые пропущенные пути начинались с / yoursite / redirect и /yoursite/index.html, чтобы ваша угловая маршрутизация могла с этим справиться.

https://docs.angularjs.org/guide/$location

Смотрите также

Перезагрузка страницы дает неверный запрос GET в режиме AngularJS HTML5

Если у вас теперь есть сервер узлов, который обрабатывает запросы, вам необходимо настроить сервер узлов для обработки перенаправлений, хотя лично я делал это только с Apache и Nginx.

Источник
Другие вопросы по тегам