Serving an Angular2 CLI built app using Nginx throws 404, 403

Question

I used Angular-CLI to create a test app and serve it using Nginx. Got either a 404 or a 403. I guess it is a problem with my Nginx config but just to be additionally sure, I have provided all the steps that I performed to get to this point.

These are the steps I followed:

Installed angular-cli: npm install -g @angular/cli
Started a new project: ng new test-angular
Checked using ng-serve and it works.
Built the project to be served using nginx: ng build. Creates a dist folder within the project directory.

Changed my nginx config:

events { 
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;

    server {
        listen 80 default_server;
        root /home/mellkor/test-angular/dist;
        index index.html index.htm;
        server_name localhost;
        location / {
            try_files $uri $uri/ =404;
        }
    } 
 }

nginx -s reload successful. On hitting localhost, I get a 404 Not Found.

Based on some suggestions, changing to try_files $uri /index.html gives me a 403 Forbidden.

Another question: since ng init doesn't seem to work anymore, how can I initialize an existing angular2 application and build it to production using angular-cli?

Yes I did refer this closed topic, but there is no solution there so far.

Additional Information:

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: linux x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Could you check whats the value of base href in dist/index.html, look for such a line <base href="">? — cpz
– cpz, Commented Feb 27, 2017 at 15:29
Yes that seems to be ok. Its difficult to zero down the issue with above information. Could you make sure nginx has right permissions on the folder askubuntu.com/questions/9402/…? — cpz
– cpz, Commented Feb 27, 2017 at 15:43
All my folder contents have -rwxr-xr-x .. ok maybe this is a stupid question.. Does running nginx as a superuser process cause any problems? — Arjun
– Arjun, Commented Feb 27, 2017 at 16:03
The default nginx conf pointed to a HTML file in my /usr/share/nginx/html .. and it had worked. So i copied the entire build to that folder and it worked as well. After I chown'd to root:root. I did the same in my home dir and it failed. FYI .. Thanks a lot btw @cpz — Arjun
– Arjun, Commented Feb 27, 2017 at 22:00

viks · Accepted Answer · 2018-03-29 06:09:56Z

4

There could be one of the possibility, that's why you are getting errors 404/403:

Wrong base href in index.html head tag
Wrong --base-href value while ng build command
Wrong nginx configuration(i.e. server root OR server location /)
Wrong rights to the files(i.e. /dist folder) that Nginx have to serve

Here is the solution:

Suppose you want to deploy your angular app at HOST: http://example.com and PORT: 8080 Note - HOST and PORT might be different in your case.

Make sure you have <base href="/"> in you index.html head tag.

Also, check that you have correct rights to /dist files which Nginx have to serve. Here is the help.

Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.
Then build /dist for your production server using the following command:

ng build --prod --base-href http://example.com:8080
Now copy /dist (i.e. /home/user/helloWorld/dist) folder from your machine's angular repo to the remote machine where you want to host your production server.

Now login to your remote server and add following nginx server configuration.

server {

    listen 8080;

    server_name http://example.com;

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

    # eg. root /home/admin/helloWorld/dist

    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.

    }

}

Now restart nginx.
That's it !! Now you can access your angular app at http://example.com:8080

Hope it will be helpful.

edited Mar 29, 2018 at 6:09

answered Mar 27, 2018 at 13:56

viks

1,41818 silver badges20 bronze badges

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

2 Comments

Arjun Over a year ago

Thanks @viks The problem was with the rights to the files that Nginx had to serve. I changed that and it worked fine. You could probably add that to the solution and I could accept the answer :)

viks Over a year ago

Thanks @Mellkor for sharing your findings. I have updated solution.

Collectives™ on Stack Overflow

Serving an Angular2 CLI built app using Nginx throws 404, 403

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related