CODEWITHSUNDEEP
angularangular2-routing
Amit Shah
Amit Shah

Reputation: 8199

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

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.

Upvotes: 20

Views: 52061

Answers (7)

Rehum
Rehum

Reputation: 600

If can be fixed by setting the htaccess file. We assume that our single page app is running on a subdirectory on the server .

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /   
 
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d 
 
  # Rewrite everything of to index.html
  RewriteRule ^sub_folder/(.*)$  sub_folder/index.html  [NC,L]                             
</IfModule>

Explaining: We assume that the app is located in /sub_folder. We config htaccess to redirect to the index.html file for any url containing sub_folder. May it helps someone.

Upvotes: 0

Z. Xu
Z. Xu

Reputation: 86

For reference, I'm using Busybox httpd and having the following in httpd.conf worked surprisingly well

E404:index.html

It means send index.html when there's a 404 error. When I directly goto a path it actually loads the page in the path. I was expecting it only shows index page but it self-navigated to the path in url.

I'm using Angular 9

https://git.busybox.net/busybox/tree/networking/httpd.c

Upvotes: 0

Antoniossss
Antoniossss

Reputation: 32550

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.

Upvotes: 24

Rutul Dave
Rutul Dave

Reputation: 51

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/

Upvotes: 5

laksh
laksh

Reputation: 11

Try using:

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',    
  }
];

imports: 
RouterModule.forRoot(routes, {useHash: true})

Upvotes: -3

Rodrigo
Rodrigo

Reputation: 2503

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.

Upvotes: 5

deepak_pal
deepak_pal

Reputation: 159

If you copy the files into a server sub-folder, append the build flag, --base-href like if you have index.html file on server /myngapp/index.html then add command with build --base-href=/myngapp/ else copy all dist file and paste on server without base-href.

Upvotes: 1

Related Questions