CODEWITHSUNDEEP
angularjsroute-providerpretty-urlslocation-provider
Dan Romulus
Dan Romulus

Reputation: 115

Angularjs - How to remove the # from the url - Error: Failed to execute 'pushState' on 'History':

I tried everything in other posts regarding removing the fragment identifier (#). Everything works as it should with the # identifier, but it would be a nice improvement for my project.

  1. I configured the $locationProvider and set html5Mode to true
  2. Set the <base href="app" /> in my index.html tryed also <base href="/" />. I used <base href="/" />
  3. Without setting a base requireBase: false.
  4. Wrapping $locationProvider.html5Mode(true) into if(window.history && window.history.pushState) to check browser support for the html5 history API as someone suggested
  5. I wrote a rule in web.config as someone else suggested.
  6. I tried all I could find after I googled it.

I am getting this error:

angular.js:13708 Error: Failed to execute 'pushState' on 'History': A history state object with URL 'http://sales/?_ijt=d1r1ladp5ro1tvflefsdpnfvd4' cannot be created in a document with origin 'http://localhost:52471' and URL 'http://localhost:52471/BeerbayCRM/BeerbayCRM/app/index.html?_ijt=d1r1ladp5ro1tvflefsdpnfvd4'.

See the list of available environment variables Your help will be very much appreciated! Thank you.

Here is my code:

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>

Update: It is partially working after I started the application in a node server separate than one WebStorm uses. After I hit refresh page I get just a short message on the page: "Cannot GET /...__partial view name* "

Upvotes: 0

Views: 959

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

You need to have server side redirects in place... when the server gets a request for example.com/yoursite/some-page by default it is just going to try and load some index files from that location when it doesn't find them it will 404. You need to setup a server side redirect in the web server config so any missed paths that start with /yoursite/ redirect to /yoursite/index.html so your angular routing can handle it.

https://docs.angularjs.org/guide/$location#server-side

See also

Reloading the page gives wrong GET request with AngularJS HTML5 mode

If you now have a node server that's handling the requests you'll need to configure the node server to deal with the redirects, personally have only done it with Apache and Nginx though.

Upvotes: 1

Related Questions