Angular - $locationProvider.html5Mode(true) prevents otherWise method for routeProvider

Question

I'm having an issue where as long as I ad $locationProvider.html5Mode(true); to my app, it no longer follows my otherWise method defined in the routeProvider. Rather than returning the 404 page, it simply displays an error page like this:

Cannot GET /myWrongURL

app.js

angular
  .module('myApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/projects', {
        templateUrl: 'views/projects.html',
        controller: 'ProjectsCtrl',
        controllerAs: 'projects'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '404.html'
      });
      // use the HTML5 History API
      $locationProvider.html5Mode(true);
  });

I used Yeoman angular templates to scaffold my app, virtually everything at this point is out of the box except the protractor tests I set up.

Have you set up a valid ``? This is required when using `$locationProvider.html5Mode(true);` — Raphael Rafatpanah, Jul 07 '15 at 00:41

score 0 · Answer 1 · answered Jul 07 '15 at 06:54

0

I think, message

Cannot GET /myWrongURL

is server problem.

Angular $location html5 mode solves only client-side setting - url does not contain # and location controls also path part in URL.

Html5 mode requires server side configuration. Every requests must return application entry point - usually index.html. Your server searches file by route path, instead of returning index - that's why you see the error.

answered Jul 07 '15 at 06:54

milanlempera

2,203
1
17
21

You were right. This actually works fine as is with my dist version, I just needed to add a line to my grunt server. – Chris Pawlukiewicz Jul 07 '15 at 17:26

score 0 · Answer 2 · edited May 23 '17 at 11:51

This is an issue with the grunt server (thank you @milanlempera). For anybody looking for a solution for this, I found it on Kryx's answer to his own question here.

If anyone else stumbles across this here is the fix:

(the only line added was the modRewrite line)

livereload: {
    options: {
        open: true,
        middleware: function (connect) {
            return [
                modRewrite(['^[^\\.]*$ /index.html [L]']),
                connect.static('.tmp'),
                connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                ),
                connect.static(appConfig.app)
            ];
        }
    }
},

Make sure you have the following declared at the top of your grunt file:

var modRewrite = require('connect-modrewrite');

The only addition I can make is that you need to install modrewrite through npm, like so:

npm install connect-modrewrite --save-dev

Angular - $locationProvider.html5Mode(true) prevents otherWise method for routeProvider

2 Answers2