Angular - The requested URL /home was not found on this server

Question

I am gonna be very brief.

I have an Angular project with simple navigation menu (routerLinks). Everything work as it is supposed to if it is on localhost, powered by angular cli.

But when I deploy it on a real server (i don't have any VPS or any other server, just folder where I can put my files) weird thing starts happening.

The app is functional, navigation is functional, routeLinks routing, but when I refresh a browser or try to write something manually into URL line, every time I get 404 Not found. (so i am in [domain]/home - everything is ok, but when i refresh browser, i got 404 /home not found.

Maybe I am looking for a problem in a bad place and it is not a problem of angular but about HTTP requests (i don't know much about it).

Do you have any idea where I should start?

Thank you, Pavel F.

the project what i am talk about: http://www.pavel-challenge.cz (no, this is not ad :D )

app-routing.module.ts

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

import { PassionsComponent } from './passions/passions.component';
import { QuestionComponent } from './question/question.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { KnowledgeComponent } from './knowledge/knowledge.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'knowledge', component: KnowledgeComponent },
  { path: 'questions', component: QuestionComponent },
  { path: 'passions', component: PassionsComponent },
  { path: '**', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

navbar.component.html

  <ul>
    <li><a routerLink="/about">About</a></li>
    <li><a routerLink="/knowledge">Knowledge</a></li>
    <li><a routerLink="/questions">Questions</a></li>
    <li><a routerLink="/passions">Passions</a></li>
  </ul>

Answer 1

FIXED: (for Apache HTTP server)

i created .htaccess file and put it into root folder on a provider side.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Answer 2

In case you are deploying on Apache , you should enable the mod_rewrite module :

sudo a2enmod rewrite

Then Restart Apache , sudo systemctl restart apache2

After that do the suggested changes in the .htaccess as per the previous answer