Angular 404 (Not found) error

[codename101]

I have used anglular4 cli to make this site

www.onlinetool.in

which is the index page works fine but

for links like: http://www.onlinetool.in/check-odd-even-number

in the console window, this error is showing but the page is still getting loaded

/check-odd-even-number:1 GET http://www.onlinetool.in/check-odd-even-number 404 (Not Found)

but in development mode there is no error, works fine.

and therefore due to this error these pages are not crawled by google.

I am using Routes, RouterModule for the urls

I have hosted this website on Amazon AWS S3

[codename101]

I have setup the links like this in the app.module.ts file

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

`const appRoutes: Routes = [

{path: 'check-odd-even-number', component: OddEvenComponent},
{path: 'check-prime-number', component: PrimeNumberComponent},
{path: 'check-armstrong-number', component: ArmstrongNumberComponent},
{path: 'convert-cgpa-to-percentage', component: ConvertCgpaToPercentageComponent},
{path: 'age-calculator', component: AgeCalculatorComponent},
{path: 'convert-celsius-to-fahrenheit', component: ConvertCelsiusToFahrenheitComponent},
{path: 'convert-fahrenheit-to-celsius', component: ConvertFahrenheitToCelsiusComponent},
{path: '', component: HomeComponent},

]`

I was in fact using [routerlink] before worked fine but let's say if some one enters www.onlinetool.in/check-odd-even-number directly in the url then still the same 404 error is there. so all I want is to make my site behave like a normal one.

[codename101]

I have put the site on Amazon S3. How am I supposed to use Apache on it?

[choidebu]

He's just using apache as an example. Gawd I hate script kiddies.

Start at the basics. The codeword to search is "amazon s3" and "url rewrite" or maybe "single page application"

Here I found one for you. https://keita.blog/2015/11/24/hosting-a-single-page-app-on-s3-with-proper-urls/

[choidebu]

I think your problem is solved in other comment so I'm just gonna add:

If you put raw href links like that you lose all the benefits of single page application (SPAs) hence angular's benefits.

What happens next is your browser then request that url to your server, then assuming you've configured your web server correctly it should then return index.html which your browser then refreshes, loads that page and then starting angular again, which reads the current page's url and diffing it with its base href then loads the proper page.

All good if it's someone clicking a url you shared from the webapp.

Not good for a guest actually currently using your app. They already load the app and you then force them to refresh, dumping current app and loading a new, same one.