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:

1. Installed angular-cli: npm install -g @angular/cli

2. Started a new project: ng new test-angular

3. Checked using ng-serve and it works.

4. Built the project to be served using nginx: ng build. Creates a dist folder within the project directory.

5. 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

Answer 1

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.

1. Firstly, go to your angular repo (i.e. /home/user/helloWorld) path at your machine.

2. Then build /dist for your production server using the following command:

   ng build --prod --base-href http://example.com:8080

3. 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.

4. 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.
   
       }
   
   }
   

5. Now restart nginx.

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

Hope it will be helpful.