For my blog application, I have set up separate routing modules for the admin and user sides. However, I am facing an issue where the client side routes are not being recognized after importing the routing module into app.module.ts. Instead of navigating to the specified components, it is redirecting to the page-not-found component. Below is the content of my app.module.ts file
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ClientModule } from './client/client-routing/client.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './client/home/home.component';
import { FooterComponent } from './client/footer/footer.component';
import { FeaturedBlogComponent } from './client/featured-blog/featured-blog.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
FooterComponent,
FeaturedBlogComponent,
PageNotFoundComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './client/home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'home', component: HomeComponent },
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
client.module.ts
import { CommonModule } from '@angular/common';
import { ClientRoutingModule } from './client-routing.module';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
@NgModule({
declarations: [BlogListComponent, BlogDetailComponent, AboutComponent, ContactComponent],
imports: [
CommonModule,
ClientRoutingModule
]
})
export class ClientModule { }
client-routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
const routes: Routes = [
{path: 'blogs', component: BlogListComponent},
{path: 'blog/:_id', component: BlogDetailComponent},
{path: 'about', component: AboutComponent},
{path: 'contact', component: ContactComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ClientRoutingModule { }
Despite setting up all modules correctly, I am unable to access the client side routes such as AboutComponent or BlogListComponent, as they result in displaying the page-not-found component.