Angular HTML5 URLs - Server configuration

Question

I have read that AngularJS uses hashbang URLs as default - but thats not an advantage and therefore HTML5 URLs should be used. In order to configure this behaviour at client side the following must be done:

...
$locationProvider.html5Mode(true);
...

At server- side also some configurations have to be done - as I understood URL requests should be configured therefore that the page with ng-app inside (the starting page - e.g. index.html) should be delivered to client. Excluded are URLs which deliver static resources (CSS, images, AngularJS partials, ...) and URLs which are used for CRUD (e.g.RESTful service URLs).

My question not would be how to adjust this behaviour at server side (e.g. for String Boot with an embedded server inside)?

And another question would be if you distinguish between static resources (e.g. .../static/..) and CRUD URLs (e.g. .../database/...) in our AngularJS application?

Thanks a lot!

If you are using apache to serve your resources, this might help -- http://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes/22740184#22740184 — rajasaur, Jun 16 '15 at 05:58
Thanks for your answer - I am using Spring Boot and do not have a apache in front of my application. Is there also a possibility with Spring Boot only? — quma, Jun 16 '15 at 06:22
Sorry, no idea about spring boot, you might want to use a webserver anyway to handle static resources and the solution above can work with that. — rajasaur, Jun 16 '15 at 06:26

score 5 · Answer 1 · answered Jun 17 '16 at 09:56

In Spring Boot you can configure a catch-all view controller like this:

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.setOrder(Ordered.LOWEST_PRECEDENCE);
        registry.addViewController("/**").setViewName("forward:/index.html");
    }
}

This forwards all requests not handled otherwise to index.html. setOrder(Ordered.LOWEST_PRECEDENCE) is used to ensure, that this catch-all forwarding only applies after no other route has been found.

However, now all resource lookups are also routed through this view controller (because WebMvcAutoConfiguration checks for the existence of the path pattern, before applying the default resource handler).

One possible fix is setting the static path pattern in application.properties to include a check for a file extension:

spring.mvc.static-path-pattern = /**.*

This only works if your angular routes don't contain any extensions. Another way is to completely disable spring boot's resource handling (spring.resources.addMappings = false) and substituting your own.

score 0 · Answer 2 · answered Jun 16 '15 at 06:06

Basically you want to serve /index.html (your Angular app) for all 404s with the request accept value of text/html. Angular will pick up on the route and will behave as expected. Try to handle this at the web server level if you can, it's going to be more efficient than handling it within whatever framework you're using.

As for the other question some sites use a subdomain like api.example.com and some sites use a path like example.com/api. Mostly a non-issue, though you might have to configure CORS if you go with a subdomain.

Angular HTML5 URLs - Server configuration

2 Answers2

Linked