Configure subfolder in nginx server for Angular 5 app

Question

I have two angular app's published to two different subfolders "testapp1" and "testapp2".

url's - 
    https://dev.testurl.org/foo -- For testapp1
    https://dev.testurl.org/bar -- For testapp2

So i build angular with basehref

For testapp1:
 ng build --prod --base-href /foo/ 

For testapp2:
  ng build --prod --base-href /bar/

My nginx configuration,

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

  client_max_body_size 1000M;
  server_name dev.testurl.org localhost;

  location /testapp1/ {
            autoindex on;
    root /testapp1/dist;
    try_files $uri $uri/ /foo/index.html;    
  }
  location /testapp2/ {
            autoindex on;
    root /testapp2/dist;
    try_files $uri $uri/ /bar/index.html;    
  }

When i try to hit, https://dev.testurl.org/foo or /bar - it has console error says "Unexpected Syntax Error" basically it's not loading the correct sources. Any idea? whether i am building app correctly or doing something wrong nginx configuration?

Why do you have foo and bar in your question, but testapp1 and testapp2 in your configuration file? — Richard Smith
– Richard Smith, Commented Jun 14, 2018 at 8:44
So /foo/index.html is actually located on the server at /testapp1/dist/index.html? — Richard Smith
– Richard Smith, Commented Jun 14, 2018 at 16:59

Richard Smith · Accepted Answer · 2018-06-14 17:42:13Z

4

There are two problems with your configuration:

The root directive is used when the path to the file can be calculated by concatenating the document root with the requested URI. Otherwise, use alias. See this document for details.

The location directive is used to match all or part of the URI. See this document for details.

For example:

location /foo {
    autoindex on;
    alias /testapp1/dist;
    try_files $uri $uri/ /foo/index.html;    
}
location /bar {
    autoindex on;
    alias /testapp2/dist;
    try_files $uri $uri/ /bar/index.html;    
}

The location and alias values should either both end with / or neither end with / in order to get the correct string substitution.

answered Jun 14, 2018 at 17:42

Richard Smith

50.3k7 gold badges97 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

capcom923 · Accepted Answer · 2020-09-29 03:32:49Z

0

Use alias for hosting local dist folder as subfolder as Richard said.

And ff you want to proxy pass to another endpoint as subfolder, see below thread~

https://stackoverflow.com/a/64112450/853509

answered Sep 29, 2020 at 3:32

capcom923

7357 silver badges16 bronze badges

Collectives™ on Stack Overflow

Configure subfolder in nginx server for Angular 5 app

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related