Angular 6 route path not working for direct url when deployed in subdirectory

Question

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './public/home/home.component';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

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

These works fine under the Development environment. If I directly open localhost:4200/home then it's landing on the expected page.

However, the one built and deployed using with ng build --prod --base-href=/myngapp/ do works only on www.domain.com/myngapp if I open the www.domain.com/myngapp/home directly, then it gives 404 not found error.

Answer 1

You need to setup proper URL rewriting rules. Angular docs explains how to do it for most popular http servers. You can find details here.

https://angular.io/guide/deployment#server-configuration

What it do, is to simply speaking, tell server to always serve index.html no matter what is the path of the request. eg.

www.domain.com/myngapp/home -> serve index.html, not home.html or something similar www.domain.com/myngapp/some/child/routing ->serve index.html and dont try to find some/child/routing.html or php and so on.

Answer 2

You must configure your HTTP server(apache, Nginx or others) to redirect all URI which began with www.domain.com/myngapp/** to the index.html file.

Notice the routes of your application (https://angular6demoamit.000webhostapp.com/) works fine when they are accessed "inside Angular" by interaction with buttons and menus. However, when you try to access the route typing it directlly on the browser, the server doesn't know the URI https://angular6demoamit.000webhostapp.com/home is a route of an Angular application. It'll probabilly try to load the index page of an inexistent home directory.

There isn't a single configuration to solve your problem. It'll depend on your HTTP server and infraestructure. Read the guide of angular which describes some configurations examples to some kinds of HTTP servers: https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml.

Answer 3

I had same issue. if it's working fine in localhost, then you should try this solution. Maybe adding URL rewriting rules in your .htaccess file solve your problem. I found it on http://joeljoseph.net/angular-6-deploy-on-apache-server-by-solving-404-not-found-error-on-page-refresh/

Add this into your .htaccess file.

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]  
RewriteCond %{REQUEST_FILENAME} -d  
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]  

for more detail go to http://joeljoseph.net/angular-6-deploy-on-apache-server-by-solving-404-not-found-error-on-page-refresh/