Angular2 + Nginx Deep Linking/Routing Issue

Question

I deployed an Angular2 application on my Apache web server and with the following .htaccess,

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]
</IfModule>

and an additional configuration in index.html,

<base href="/applicationName/">

the application was able to load without any issue and there was no redirection problem.

I'm now trying to setup the same application in my Nginx server but I couldn't seem to make it work.

I understand that there is no .htaccess in Nginx, how do I convert the above .htaccess to work in Nginx main configuration?

Thanks a lot!

Answer 1

Nginx is actually quite a lot easier than apache in my opinion. One way to do it is to create a server block like this. This is of course if you have access to the configuration file of nginx on your server.

server {
    listen       80;
    server_name  example.com;

    root   /path/to/your/index;
    index index.html;

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