I recently completed my first website using Angular and uploaded it to the server successfully. When browsing through the pages, everything seems fine. However, I encountered an issue when trying to access specific URLs by copying and pasting them into the browser. For instance, if I paste the URL 'www.project.com/app/home/users/22' directly, I receive a '404 not found' error. But if I navigate to the 'user 22' link from the homepage URL 'www.project.com/', it works perfectly. Can anyone explain why this is happening and how I can resolve it?
Thank you
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { AuthGuard } from "./guards/auth.guard";
import { GuestPageModule } from "./pages/guest/guest.module";
// Define route paths
const routes: Routes = [
// Redirect to welcome page
{ path: '', redirectTo: 'welcome', pathMatch: 'full'},
// Load the welcome module with authentication guard
{ path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomePageModule) },
// Other route definitions...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The URL I'm trying to reach is
Link example:
<a (click)="goUser(user)">
// Function to handle user navigation
goUser(user: any) {
user = user;
this.userData.userViewed(user).pipe(
map((data: any) => {
if (data.success) {
const navigationExtras: NavigationExtras = {
state: {
user: user
}
};
// Navigate to the user details page
this.router.navigate(['guest/user' + id], navigationExtras);
}
})
).subscribe()
}
Guest routing module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GuestPage } from './guest.page';
const routes: Routes = [
// Basic route configuration for guest page
// Other nested routes...
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class GuestPageRoutingModule {}