404 Error on page refresh with Angular 7, NGINX and Docker

this likely can be fixed quickly by simply using the useHash: true flag. For some unknown reason angular does not default this setting to true.

Make sure your app-routing-module.ts file contains useHash like this:

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})

With a refresh on Angular app, we need to tell nginx web server to first look at the index.html file if the requested route exists or not before showing the error page. This is working fine for me:

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}