CODEWITHSUNDEEP
angulartypescriptangular-routingangular8
chatterjeetridib
chatterjeetridib

Reputation: 161

Angular routes not redirecting to right components

I'm creating a blog application where there is a admin side and a user side. I want to keep the routing of admin and client side separated into two modules. But after creating the routing module for client side and importing it to the app.module.ts it's not catching the client side routes and returning page-not-found component. Below is 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 { }

When I'm trying to access the client side routes like AboutComponent or BlogListComponent it's returning page-not-found component

Upvotes: 0

Views: 2296

Answers (1)

Ares
Ares

Reputation: 431

Since you are using feature modules ( ie: ClientModule ), Your client module routes aren't being loaded yet, only what is in app-routing.module.ts are eagerly loaded. Try lazy loading the ClientModule in your app-router.module.ts file.

// Add this to routes array in app-router.module.ts.
{ path: 'blog', loadChildren: () => import('./path/to/client.module').then(m => m.ClientModule) }

Then update your routes in your client-router.module.ts like so:

const routes: Routes = [
  {
    path: '', // Base route is now 'blog' or whatever you choose to call it in app-routing.module.ts.
    component: BlogListComponent,
    children: [ path: ':_id', component: BlogDetailComponent ]
  },
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
];

As a side note, I would consider refactoring About & Contact routes to be seperate from ClientModule, unless that is what you're aiming for.

Upvotes: 1

Related Questions