Angular Routing - Direct path access not working from URL - angular-routing

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

Answer 3

It took me almost a year, but I figured out that you have to pay for node.js hosting, AWS elastic beanstalk is a good candidate for this. Then you have to serve your static compiled website using something like express.js. This is my working example server.js:
"use strict";
const express = require("express");
const compression = require('compression');
// config
const port = process.env.PORT || 3000;
const app_folder = "./";
const options = {
dotfiles: 'ignore',
etag: false,
extensions: ['html', 'js', 'scss', 'css'],
index: false,
maxAge: '1y',
redirect: true,
}
// create app
const app = express();
app.use(compression());
app.use(express.static(app_folder, options));
// serve angular paths
app.all('*', function (req, res) {
res.status(200).sendFile(`/`, {root: app_folder});
});
// start listening
app.listen(port, function () {
console.log("Node Express server for " + app.name + " listening on http://localhost:" + port);
});
Then in package.json you have a start command the website host will run:
{
"name": "xinthose.com",
"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {...},
"devDependencies": {...}
}
This is the only way to serve pages dynamically on a static single page application.