Enabling HTML 5 Mode in AngularJS 1.2

Question

I'm working on an app that needs to use HTML 5 mode. Due to the fact that I am migrating an existing site to use AngularJS 1.2, I cannot have '#' tags in my URL. Currently, I have the following:

angular.module('myApp', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider
    .when("/home", {templateUrl:'home.html', controller:'homeController'})
    // other routes are defined here..
    .otherwise({redirectTo: '/home'});
  }]);

Unfortunately, when I visit 'http://myServer/home', my app does not work when html 5 mode is enabled. I get a 404. However, when I visit http://myServer/ it works. Its like deep-linking doesn't work when I have html5 mode enabled. If I comment out the line that says "$locationProvider.html5mode(true);", the site functions. However, once again, I cannot have hash tags in my URL due to the fact I'm migrating an existing site.

Am I misunderstanding how html5mode(true) works? Or, am I doing something wrong?

Thank you

Answer 1

If you're using html5mode you need make changes on the server side to return your entry point index.html (main app page) on any URL request. Then angular app will parse URL and load needed page.

Answer 2

Here's a list of solutions for most common web servers: Apache, nginx, IIS and express. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

The link is in ui-router's wiki, but it has nothing to do with it, this answer is valid with ngRoute.

Answer 3

I had a similar problem while setting up my app. I was trying to implement pretty URLs as the # in the URL was very disturbing. This is how I solved the problem.

Step 1: Inject the location provider in your app module and set html5mode to true

$locationProvider.html5Mode(true);

Step 2: Insert the base tag in your index.html Some people say this is not required but I got an error when I tried removing the tag and implementing the same. It says locationProvider requires a base tag.

<base href="/specify-app-directory-here/">

If it is in the root, the following line will suffice

<base href="/">

Step 3: You will need to setup URL rewritting on your server. I, myself am a beginner but found it quite simple. If you are using an Apache just this is how you do it.

Create an .htaccess and place it in the same directory as your index.html, or you can even use an existing one. Add the following lines to the .htaccess

Options +FollowSymLinks 

RewriteEngine On
RewriteBase /base-as-specified-in-base-tag/

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^([a-zA-Z]+)$ #/$1 [NC,L]

The last line is what is very important. Basically it tells your server if it finds any links of the form "/home" it will redirect it to "/#/home" which angularJS can then handle appropriately. In doing so, it does not actually change the url displayed in the address bar and you have a pretty url. If you try reloading the page also, you will not get a 404 error.

Hope this helps.