Nginx config with multiple AngularJS2 Projects using HTML5Mode

Question

I have a problem with my Nginx configuration. I have two separate angularjs2 projects which should work with one nginx instance. The applications are separated into two folder /admin and /webapp.

Now what I'm trying to do is when I call mydomain.com it should open the app in /webapp. If I call mydomain.com/admin it should open the admin application (which is also an angularj2 app).

What I've tried so far is the following:

server {
  listen       80;
  server_name  localhost;
  root /usr/share/nginx/html/webapp;    
  index index.html index.htm;

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

  location /admin/ {
    alias /usr/share/nginx/html/admin/;
    try_files /admin/$uri /admin/index.html;
  }
}

I hope I can get help. Thanks in advance!

Answer 1

Try:

root /usr/share/nginx/html/webapp;    
index index.html index.htm;

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

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

The root directive is preferred over the alias directive. See this document for details.

The index directive is inherited and does not need to be repeated.

The $uri/ terms will encourage nginx to append a / to the URI of a directory so that the index directive works correctly. I also corrected some of your try_files terms. See this document for details.