Nginx serving Angular returns 404

Question

I'm trying to run a production-built Angular app through nginx. Currently, I can serve the index.html just fine but the issue is for all the *.js and *css referenced as sources inside the index itself, those return a 404 error. I've been going back and forth between different configs using root or alias but none seem to do the trick.

First, I'm building the app using:

ng build --configuration production --aot

Note: The above command results in the creation of a dist folder with all the necessary files to run the app, I then move all those files to the path /apps/customer-ui

Folder structure is as follows:

/apps
  /customer-ui
    /index.html
    /(all other files resulting from build)

This is my nginx.conf

...

http {

    ...
    
    server {
        listen 80;
        server_name localhost;
        root /apps;
        index index.html;
        
        location / { }
        
        location ^~/customer-ui {
            alias /apps/customer-ui/;
            try_files $uri $uri/ /customer-ui/index.html =404;
        }
        
    }
}

Currently, accessing http://localhost/customer-ui returns the correct index but also the above mentioned 404s, because the references are pointing to http://localhost/filename.js instead of http://localhost/customer-ui/filename.js

Console errors here

Any help is very much appreciated.

lenin · Accepted Answer · 2022-05-09 15:42:55Z

0

Since all the necessary files are inside customer-ui directory, it's better to point all paths there, like so:

        root /apps/customer-ui;
        index index.html;
        
        location / {
            try_files $uri $uri/ /index.html =404;
        }

Alternatively, you can use this (not recommended since it's rather confusing):

        root /apps;
        index index.html;
        
        location / {
            alias /apps/customer-ui/;
            try_files $uri $uri/ index.html =404;
        }

answered May 9, 2022 at 15:42

lenin

1712 silver badges10 bronze badges

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

2 Comments

Andre Fidalgo Over a year ago

Sorry I failed to mention on the original post, I'm looking to host two Angular apps (customer-ui and admin-ui), their paths are /app/ui-name and I want them to be acessible via localhost/ui-name. Is it possible to setup this scenario on nginx?

lenin Over a year ago

@AndreFidalgo It's possible, the apps would need to be compiled with correct path for their assets. Nginx can't help with that.

Collectives™ on Stack Overflow

Nginx serving Angular returns 404

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related