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

Answer 1

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.

Answer 2

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.