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="/">