Reputation: 8199
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: 52060
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
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
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
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
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
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
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