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>

Solution 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>

Solution 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

Solution 3

The matter is in your HTTP server configuration.

you have to make all the URL after your hostname pointing to the HTML resource embedding your angular application.

like in NGINX :

 location / {
       root <path to index.html>;
       try_files $uri  /index.html =404;
( if ressource exist serves it, likes images, else load index.html to load angular app )
    }

here is the official documentation

while navigating after initial load, the angular router take the lead, and display data after location change dynamically without http request.

But if you load directly to <...>/home the http server certainly try to load a file home.html, and then send a 404.