Angular html5Mode state refresh using Amazon’s ElasticBeanstalk

Angular’s built-in routing works wonders. you can do so by either registering the route with the hash in the URL or you can states ( html5Mode set to true ). This will leverage html5’s push state to route URLs. Unfortunately, this will cause some issues when attempting to refresh the browser.

You will receive 404’s saying that the resources do not exist. To fix this we must redirect every URL other read file URLs to the index page for angular to interpret and decide where it should route. Using this strategy you must leverage a standard error page for if it is an invalid state.

.htaccess in the root of the eb deploy zip / folder

RewriteEngine   On
Options +FollowSymLinks

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

RewriteRule ^(.*)$ index.html

To get this working we need to add the following inside the head of the index.html

<base href="/">