Serve angular-cli from dist folder with nginx

Question

I'm trying to serve my angular-cli application from the dist folder using nginx I used this command to generate dist

ng build --prod

then I moved the dist folder to my server and this is my nginx configuration:

server {
    listen 80;

    server_name x.x.x.x;


    location /angular {

        proxy_http_version 1.1;
        root /usr/share/nginx/html/dist;
        index index.html index.htm;
        try_files $uri $uri/ angular/dist/index.html;
    }

}

now when I try to reach x.x.x.x/angular I got 404 Not Found

Whats wrong with my configuration?

try: "location /angular/ {}" And are you maintaining logs? can you post ngnix logs here? — Malik Shahzad
– Malik Shahzad, Commented Jul 12, 2017 at 14:14

viks · Accepted Answer · 2018-03-27 08:01:25Z

5

Make sure you have <base href="/"> in you index.html head tag.
You have to use the following command to build:

ng build --prod --base-href http://x.x.x.x

Now check your nginx server configuration and restart nginx.

server {

    listen 80;

    server_name http://x.x.x.x;

    root /path/to/your/dist/location;

    index index.html index.htm;

    location / {

        try_files $uri $uri/ /index.html;

        # This will allow you to refresh page in your angular app. Which will not give error 404.

    }

}

For more information check this answer.

Hope it will be helpful.

edited Mar 27, 2018 at 8:01

answered Mar 27, 2018 at 5:51

viks

1,41818 silver badges20 bronze badges

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

1 Comment

abhilashak Over a year ago

This helped me get rid of the 404 page when reload Angular App. Thanks!

Collectives™ on Stack Overflow

Serve angular-cli from dist folder with nginx

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related