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/

Answer 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;
        }
    }
}

Answer 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;

Answer 3

I had the same issue with a subdomain at a site hosted with HostGator shared hosting. It appears it's running Apache 2.2.31.

Searching around eventually led me to "Apache Directives", which led me to "Custom Error Responses".

I was able to fix my issue by creating a .htaccess file in my subdomain folder with the following line in it:

ErrorDocument 404 /index.html

Though looking at the debug tools, I'm still getting a 404 code returned even though it succeeds.

UPDATE:

Was able to fix the 404 issue by changing my .htaccess to the following:

RewriteEngine On
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

Now I'm properly getting redirected to index.html and code is 200.

Answer 4

This is what my working configuration look like, slightly different than accepted answer. My project located in folder /usr/share/nginx/html/myapp and index.html base path has /myapp/ as base url.

server {

  listen 80;

  sendfile on;

  default_type application/octet-stream;


  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;


  root /usr/share/nginx/html;


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

}