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

angular 6 #refresh page 404
angular 8 404 page
angular direct url not working
how to restrict direct url access in angular 7
angular 6 page not found route
angular htaccess
angular 6 refresh page 404 iis
angular rewrite'' url

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>

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>

The requested URL was not found on this server error in Angular , GitHub is home to over 50 million developers working together to host If you can't change the server, you might try using the hash URL the request will not hit your angular application on any other request than "/" directly. The requested URL /my-site/ was not found on this server. Apache/2.4.17 (Win64) PHP/5.6.16 Server at localhost Port 80 On the other hand, " localhost/ " and " localhost/phpmyadmin/ " work perfectly fine.


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.

404 when manually changing URL in browser to defined router , Angular 6+ deploy to Apache server by solving 404 Not found error on page up basic routing module and a home component the project structure the URL and not have the browser request the page from the server and� 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.


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

Angular 6+ deploy to server/ solve 404 Not Found error on page , (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� After refresh, ur server is not able to resolve the url as its being generated by angular not the server – Shashank Vivek Mar 31 '18 at 6:16 Thankx for a quick response, Could you please explain more in which file this code will be applied? – s.jain Mar 31 '18 at 6:21


The requested URL was not found on this server, The requested URL was not found on this server - Angular 2 Routing with Google to the particular blog post, instead it will take them to the home component. by Moshe Vilner The best ways to connect to the server using Angular CLI Everybody who has used Angular CLI [https://cli.angular.io/] knows that it is a powerful tool which can take a front-end development job to a completely different level. It has all the common tasks like live reload, typescript transpiling, minification, and more. And it’s all preconfigured and ready to use with one


The requested URL /login was not found on this server (.htaccess , So, i am having this weird problem, which i tried to rectify via net searches, but nothing has worked so far. I can access my routes easily, but only one route� GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. The requested URL /content


Angular 2 Routing : 404 page not found on refresh, Because angular applications run in their own sandbox, URL changes happen using simple js only. so to a user, it might seem like they're visiting� Check for errors in the URL. Often times the 404 Not Found error appears because the URL was typed wrong or the link that was clicked on points to the wrong URL. Move up one directory level at a time in the URL until you find something.