[SOLVED] html5mode breaks AngularJS routing

html5mode breaks AngularJS routing

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.

Solution