How to remove # from urls in angular app on Amazon (Elastic Beanstalk)

Question

I have an angular (1.5.9) app hosted on Amazons Elastic Beanstalk.

I want to remove the # from URLs and have followed this guide and others similar to it.

update of app.js is done:
```
$locationProvider.html5Mode(true);
```

update of index.html done:

<head>
    ...
    <base href="/">
</head>

update of all references are done:

/#/login -> /login

I have ssh'd to my amazon server and created a .htaccess file there:

[ec2-user@ip-xxx-xx-x-xxx]$ ll -a /var/www/html total 12 drwxr-xr-x 2 root root 4096 22 maj 13.43 . drwxr-xr-x 6 root root 4096 1 maj 23.56 .. -rw-r--r-- 1 root root 339 22 maj 13.43 .htaccess

with the content:

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

I have the index.html and the app.js files under the /src/main/resources/static directory

Accessing www.mypage.com and navigating to www.mypage.com/about works great with NO # in the url, but refreshing the page gives 404.

What am I doing wrong? How is this normally done on Amazon servers?

I had similar problems with a .NET backend and tried all of the standard solutions for dealing with URL rewrites on IIS. I never got it to work and ended up just dealing with it from .NET. If there's an entry point on your Java app that is reached before the 404 occurs, you might be able to do the same. I basically have code that when a request starts if the path doesn't point to a file, it rewrites the path to point to my index.html file. Works great. — Mike Feltman, May 22 '17 at 16:09
@MikeFeltman that's the best advice I've had so far, thx! I tested it now and it seems to actually work! Will test some more and if it is a solid solution I will post the exact code on the backend as an answer. — JavaDevSweden, May 22 '17 at 21:28

score 2 · Accepted Answer · answered May 22 '17 at 22:53

With inspiration from Mike's comment and some links here and here I chose to give up on .htaccess files, httpd.conf files or other such redirections on Amazon. Instead I simply added this controller to my Java Spring Boot backend:

package com.example

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class CatchAllController {
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

Using @RestController did NOT work for me, I had to use @Controller.

The pattern matches everything that does not have a "." in it so resources like .jpg images are not matched. Also all other endpoints still gets matched first (I guess because they are more specific than this rule)

Together with step 1-3 in my original question this makes everything work as intended, reloads work great and no # is required anywhere. And now I can control this within my familiar Java context, test on localhost easily and not get lost in mod_rewrite docs...

score 0 · Answer 2 · answered May 22 '17 at 14:35

0

To remove the # from the URL, you will need to set the HTLML5 mode in your config:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.html5Mode(true);   
}]);

Also set the base in the <head> tag of your index.html:

<head>
    ...
    <base href="/">
</head>

If you are using Angular 1.6 or higher, you will also need to update the hashPrefix (default !):

$locationProvider.hashPrefix('');

answered May 22 '17 at 14:35

Mistalis

17,793
13
73
97

As stated "Everything is working except the last step.." so those things have already been done and are working. I will clarify this in my question. – JavaDevSweden May 22 '17 at 14:43
@JavaDevSweden In your tutorial, I don't see anything about setting the base in the `` tag. Did you try my suggestion? – Mistalis May 22 '17 at 14:52
Sry, I was unclear in the question. I have looked at 10+ guides, most of them say the same thing. The one being linked doesn't say to add the tag but others do. So I did it already. Thx for pointing it out. – JavaDevSweden May 22 '17 at 14:57

How to remove # from urls in angular app on Amazon (Elastic Beanstalk)

2 Answers2