html5mode breaks AngularJS routing

Question

I am having an issue with using html5Mode with ngRoute not quite like issues others have had with the same thing. Here is the most relevant section of my code:

(function () {
  var config = function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home/home.view.html',
        controller: 'homeCtrl',
        controllerAs: 'vm'
      })
      .when('/about', {
        templateUrl: 'common/views/genericText.view.html',
        controller: 'aboutCtrl',
        controllerAs: 'vm'
      })
      .when('/location/:locationId', {
        templateUrl: 'locationDetail/locationDetail.view.html',
        controller: 'locationDetailCtrl',
        controllerAs: 'vm'
      })
      .otherwise({redirectTo: '/'});

    /* $locationProvider.html5Mode({
     enabled: true,
     requireBase: false
    }); */
  };

  angular
    .module('loc8r', ['ngRoute', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', config]);
})();

The issue arises specifically with the route for /location/:locationId. With html5Mode on, an attempt to load a URI like http://127.0.0.1:3000/location/5a27ab691c5e0a989c0634da results in a blank page. Curiously, my logging output from Node tells me that the template and controller are both being accessed. Even more curiously, if I change the route from /location/:locationId to just /:locationId and load a URI like http://127.0.0.1:3000/5a27ab691c5e0a989c0634da, then the page will load. But the only way to get /location/:locationId to work is to leave html5Mode disabled and then go to http://127.0.0.1:3000/#!/location/5a27ab691c5e0a989c0634da. But that's ugly. How can I get html5Mode working in this case?

If necessary, I can push all my most recent changes to GitHub and then provide the full code.

kam · Accepted Answer · 2018-02-08 20:51:08Z

2

Have you set up base attribute in index.html file?

Check: How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

answered Feb 8, 2018 at 20:51

kam

4284 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

readyready15728 Over a year ago

That fixed it. Weird.

readyready15728 Over a year ago

That'll take a few minutes.

Collectives™ on Stack Overflow

html5mode breaks AngularJS routing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related