I have a one-page angular 2 application that uses routing. When I hit my base URL example.com then the page loads correctly. However example.com/dashboard results in a 404 error.

My server logs have this:

2017/02/14 05:37:22 [warn] 680#680: conflicting server name "example.com" on 0.0.0.0:80, ignored
2017/02/14 05:37:22 [warn] 680#680: conflicting server name "www.example.com" on 0.0.0.0:80, ignored
2017/02/14 05:37:22 [warn] 680#680: conflicting server name "example.com" on [::]:80, ignored
2017/02/14 05:37:22 [warn] 680#680: conflicting server name "www.example.com" on [::]:80, ignored
2017/02/14 05:48:43 [error] 997#997: *1 open() "/var/www/example.com/html/dashboard" failed (2: No such file or directory), client: 41.180.12.42, server: example.com, request: "GET /dashboard HTTP/1.1", host: "example.com"
2017/02/14 05:49:03 [error] 997#997: *1 open() "/var/www/example.com/html/dashboard" failed (2: No such file or directory), client: 41.180.12.42, server: example.com, request: "GET /dashboard HTTP/1.1", host: "example.com"

The page dashboard.html does not exist because its I'm using angular's routing and I built the application using webpack.

Here is my server block:

server {
        listen 80;
        listen [::]:80;

        root /var/www/example.com/html;

    index index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

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

Thank you for your help.