404 Not Found error on nginx Angular: 8.0.2 routing

Question

I am running into an issue where, when I try to access mywebsiteurl/radar-input or mywebsiteurl/daily-submissions ,I get a 404 Not Found error, I can confirm the corresponding components load fine when I don't use the routing method, following is my app-routing.module.ts

I generate static files using the following command and create an empty .nginx file and host these static files on nginx server

ng build --prod --outputPath=/<current working directory>/www

Can any one provide guidance on how to debug this and fix it?

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RadarInputComponent } from "./radar-input/radar-input.component";
import { LatestSubmittedProjectPageComponent } from './latest-submitted-project-page/latest-submitted-project-page.component';

const appRoutes: Routes = [
  { path: 'radar-input', component: RadarInputComponent },
  { path: 'daily-submissions', component: LatestSubmittedProjectPageComponent },
  {
    path: 'radar-input',
    component: RadarInputComponent,
    data: { title: 'Radar List' }
  },
  { path: '',
    redirectTo: '/radar-input',
    pathMatch: 'full'
  },
  { path: '**', component: RadarInputComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

UPDATE1:

I looked at 404 Not Found nginx angular routing and created a Staticfile & I added this line pushstate: enabled still did NOT work for me

UPDATE2:

I tried to create a nginx.conf file as below but I still get the error

server {
    root /www;

    location / {
    }

    location /daily-submissions/ {
        index index.html
    }
}

www folder content:

drwxr-xr-x  23 username  staff     736 Aug 19 13:59 ..
-rw-r--r--   1 username  staff    1440 Aug 19 13:59 runtime-es5.741402d1d47331ce975c.js
-rw-r--r--   1 username  staff  770212 Aug 19 13:59 main-es5.ded1413a886662a5ad02.js
-rw-r--r--   1 username  staff  113549 Aug 19 13:59 polyfills-es5.405730e5ac8f727bd7d7.js
-rw-r--r--   1 username  staff   14707 Aug 19 14:00 3rdpartylicenses.txt
-rw-r--r--   1 username  staff   28136 Aug 19 14:00 overlay.2663ca4a577f280aa709.png
-rw-r--r--   1 username  staff   50408 Aug 19 14:00 banner.6f97727962128487d41a.jpg
-rw-r--r--   1 username  staff    1440 Aug 19 14:00 runtime-es2015.858f8dd898b75fe86926.js
-rw-r--r--   1 username  staff  683152 Aug 19 14:00 main-es2015.81b9cbd6a9d33d23040d.js
-rw-r--r--   1 username  staff   37304 Aug 19 14:00 polyfills-es2015.5728f680576ca47e99fe.js
-rw-r--r--   1 username  staff  105076 Aug 19 14:00 styles.64346455fc558cf71e6a.css
-rw-r--r--   1 username  staff    5430 Aug 19 14:00 favicon.ico
drwxr-xr-x  14 username  staff     448 Aug 19 14:00 .
-rw-r--r--   1 username  staff    1050 Aug 19 14:00 index.html

I guess you need to return `index.html` on 404 errors. Whenever you access any page that isn't served by `index.html` it's considered by server as 404 error. Therefore, you have to either return `index.html` on 404 errors or create `404.html` (the file that is automatically picked up as an error page) and copy paste `index.html` inner into there — Sergey, Aug 26 '19 at 18:35

Omair Nabiel · Answer 1 · 2019-08-20T07:53:51.333

5

I hope you know exactly what the problem is. This problem occurs in SPA (Single Page Applications). The url you type looks for the page directory/file wise. If you go to lets say mywebsiteurl/radar-input it will look for file radar-input. In SPA's there's only one file and thats index.html so it won't find the radar-input file and throw a 404.

SPA's have all their logic, routing in the index.html and once it gets served it handles everything for you (not case for non-spas), so if you go to mywebsiteurl/ it will just work fine and all urls will be loaded through app routing reason being that mywebsiteurl/ will look for index.html file and find it and serve that. So if your website is working fine by visiting the base url means that your static files are in the correct directory you just need to add this to you nginx.conf

location / {
try_files  $uri /index.html;        #check if uri exists else serve index.html as rewrite
}

which basically tries to first find the file in url , if it doesn't exist it will serve the index.html.

edited Aug 20 '19 at 07:53

answered Aug 20 '19 at 07:46

Omair Nabiel

1,662
2
12
24

I do have that in my nginx.conf file,if I go to `mywebsiteurl` it works great but I still get a 404 error while accessing `mywebsiteurl/radar-input` – carte blanche Aug 20 '19 at 17:09
try this instead try_files $uri $uri/ /index.html; – Omair Nabiel Aug 20 '19 at 17:21
I already tried that too,I am trying to see if I see any errors in the error log to get any clue – carte blanche Aug 20 '19 at 17:22
@user2125827 I faced the same issue a few days ago, you need to replace the default nginx configuration file and replace the location with try_files $uri $uri/ /index.html; in linux you will find the default configuration file at the path "/etc/nginx/conf.d/default.conf", not sure about windows. If you are using a docker you need to add to the docker script to replace the default nginx configuration file with your updated configuration. – Kaushik Aug 21 '19 at 20:25
I am also getting the same issue if I run /project it works but if I goto project/dashboard it gives me 404 error @Kaushik – Dharmendra Patel Oct 12 '20 at 06:12

score 4 · Answer 2 · answered Aug 26 '19 at 13:28

You can try enabling the hashtag in the angular router. It comes to help when a webserver is configured wrong, so the routing will be done client side. At least you will know where to search the issue for.

RouterModule.forRoot(routes, {useHash: true})

IF the routing is still wrong with the hashtags, it means the issue is in the router configuration, if it works, than the nginx config is bad.

score 1 · Answer 3 · answered Aug 26 '19 at 18:28

You could try replacing the location block in your Nginx configuration with the code below:

location / {
    try_files $uri $uri/ /index.html;
}

You can remove any other location blocks you have configured. Just adding this one should do it. It redirects all the requests to index.html

score 1 · Answer 4 · answered Jan 25 '20 at 00:36

I tried all your examples and in Angular8 the one from nginx.conf doesn't work, I publish here the implemented solution after reading the nginx documentation.

Container for Azure with SSH enabled with linux alpine --final size 37Mb!

#Stage 1
FROM node:12-alpine as node
WORKDIR /app
COPY angular-app .
RUN npm install
RUN npm run build --prod

#Stage 2
FROM nginx:alpine
LABEL maintainer="Angular for Azure App Services Container <jose.mantilla@globant.com>"

RUN apk add openssh openrc supervisor nginx-mod-http-headers-more\
     && echo "root:Docker!" | chpasswd 
COPY scripts/sshd_config /etc/ssh
COPY scripts/default.conf /etc/nginx/conf.d/
COPY scripts/supervisord.conf /etc/
RUN ssh-keygen -A
COPY --from=node /app/dist/angular-app /usr/share/nginx/html
EXPOSE 80 443 2222
CMD ["/usr/bin/supervisord"]

Nginx configuration --default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

   error_page  404              /index.html;
    server_tokens off;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    header Strict-Transport-Security "max-age=15768000" always;
}

Kind regards

zhimin · Answer 5 · 2019-08-20T00:54:12.930

0

I think there is something wrong with your nginx config, please check the error.log (should be /var/log/nginx).

And since you do not use hash (#) in the client route, please use try_file in the nginx config.

Here is my nginx config as flow, which works perfectly with angular apps.

location /myapp/ {
    alias /myapp/;
    index index.html index.htm;
    add_header Cache-Control no-cache;
    gzip_static on;
    try_files $uri /myapp/index.html;
}

edited Aug 20 '19 at 00:54

answered Aug 19 '19 at 22:41

zhimin

2,740
12
22

zhimin - I want to load `mywebsiteurl/daily-submissions` and `mywebsiteurl/radar-input` on my website ,I updated my www content and the nginx config I have ,do you see any obvious error with my nginx config? – carte blanche Aug 19 '19 at 23:36
please check the error.log of your nginx, I think there is some location error with your config. and if you do not want use `#` in client route, please use `try_files` in your location config. – zhimin Aug 20 '19 at 00:48

score 0 · Answer 6 · answered Apr 20 '20 at 07:31

0

Below changes worked for me,

Docker file:
    .....
    .....
    COPY /dist/* /usr/share/nginx/html/myApp/

nginx config:
    server {
      listen 80;
      location /myApp {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
      }
   }

index.html:
<base href="/myApp">

I hope this might help others.

answered Apr 20 '20 at 07:31

Ranjit Dhongade

1

Hello, for my case I needed to copy also the index.html to /usr/share/nginx/html/, otherwise error 403 forbidden. Still not working tho, doesnt do its job. – Arttu Pakarinen Sep 03 '21 at 09:05

404 Not Found error on nginx Angular: 8.0.2 routing

6 Answers6