Angular Routing - Direct path access not working from URL

Question

I created and host www.xinthose.com. This is the source code for the website. When you navigate to the website, it will take you to the path /home, but when you try to duplicate that tab or go directly to www.xinthose.com/home, I get a 404 error from HostGater (my website host). This is the contents of app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent }   from './home/home.component';
import { BibleComponent }   from './bible/bible.component';
import { AboutComponent } from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'bible', component: BibleComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Why is this happening and how do I fix it? Is it related to pathMatch at all? Am I missing some Route property?

Answer 1

Alternative solution, May 2022:

This is probably a very late answer and I see that you have already solved your question. However, here is an alternative (free hosting but depending on the services you use it can be paid):

You can use Firebase Hosting to host your angular application for free. There is the possibility to also use your own domain if you don't want to use the default urls generated from Firebase. I had initially hosted my application elsewhere, which resulted in the same problem that you described above, however hosting the application using Firebase solved this issue for me.

You can implement firebase in your application simply from the Firebase documentation (link above) or a simpler solution is to implement it using angular/angularfire which is the official implementation of Firebase for Angular. Please install the library with ng add @angular/fire and follow the instructions given in the terminal.

Answer 2

This is not because of the web app route roles.

Angular applications have to become installed , and available so , angular router can be usable , so , when ever you try to access route like this 'domain/home' , you will get 404 error.

There is three solution that i know right now

1st 'best'

Angular universal

2nd

If your host is something like apache , that use php files, try to rewrite routes like this

search for rewrite urls for any other kind of host servers

• .htaccess

RewriteEngine On
    RewriteCond %{HTTP_HOST} !^www.domain.com$ [NC]
    RewriteRule ^(.*)$ https://app.domain.com/$1 [L,R=301]

3rd

Use PWA

this one is awesome, but still , application have to be installed on user device , but after first launch , direct routes will work