NGINX and Angular 2

Question

My current app users routes like this /myapp/, /myapp//, /myaapp/dept/

My app is currently deployed in an internal http server with NGINX. The other server that accepts external traffic, also runs NGINX and forwards it to the internal server.

I have add baseref=/myapp to the index.html as per documentation

If the user goes to http://www.myexternalserver.com/myapp, the app works perfectly. If the user is inside the page and clicks on an internal link like http://www.myexternalserver.com/myapp/myparameter, it works. The url in the browser changes, the page is displayed as intended. I am guessing it's processed by Angular 2.

Unfortunately when a user types in the url directly: http://www.myexternalserver.com/myapp/myparameter, I get a 404 error made by NGINX.

I think I have to configure NGINX settings but I don't know how should modify NGINX's config or what to put in the sites-available/default file/

Solution 1

I just had this same issue and found a solution. My base href is "/", however.

Below is my nginx.conf:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  mysite.com www.mysite.com;
        root /usr/share/nginx/html;

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

Solution 2

I was also having problems here, this is now contemplated in the angular docs: https://angular.io/guide/deployment

NGinx: use try_files, as described in Front Controller Pattern Web Apps, modified to serve index.html:

try_files $uri $uri/ /index.html;