How to configure Nginx to work with html5mode

Question

For clean urls in angularjs I must use $locationProvider.html5Mode(true); but when I refresh my page it shows a 404.

I've read that I need to configure server file.

Structure

 /html -
 /views -
   home.html
   about.html
   contact.html
 index.html
 app.js

What I've done so far:

nginx.conf

server {
    root /html/views;
    index index.html;

    location / {
    try_files $uri $uri/ =404;
    }
}

Answer 1

The Angular HTML5 location mode basically took advantage of HTML5 history API to "simulate" URL changes in client. But the URLs are probably not real (not exist) from the point of view from server therefore it's not possible to locate those pages on the server. There are generally two solutions can let server to know the URLs:

1. Use server-side rendering. This is widely used by another framework called ReactJS. And actually AngularJS 2.0 can work on a server too. Therefore it is possible to generate the real pages server-side and serve them to the client.
2. Use HTTP server rewrite techniques. This is what you are trying to do. The idea is to forward all related requests to a single AngularJS entrypoint HTML page, normally it's the index.html from the root.

For your case, assume the entrypoint of AngularJS is /index.html. Try this:

server {
    root /html/views;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

The previous solution is not perfect, because it will test every request arbitrarily. We can avoid unnecessary URL looking up by specify more detailed rules:

server {
    root /html/views;
    index index.html;

    rewrite "^/users" /index.html last;
    rewrite "^/pages" /index.html last;
    ...
}

Use regular expressions to match the URLs you want to serve with Angular.