0

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.

Improve this question
2
  • Have you set up a valid <base href>? This is required when using $locationProvider.html5Mode(true); Commented Jul 7, 2015 at 0:41
  • Yes I did. See my below answer Raphael. Thanks though, :) Commented Jul 7, 2015 at 17:27

2 Answers 2

Reset to default
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.

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

1 Comment

You were right. This actually works fine as is with my dist version, I just needed to add a line to my grunt server.
0

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
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.