How to redirect to the login page if the path is null using the modules in angular

Question

I have an angular application, and created the login and dashboard pages and my requirement is while redirecting it has to go to login page and it has to go to dashboard page only when the path is dashboard.

I have created the user-pages folder for login and created the module within the user-pages folder.

app-routing.module.ts

const routes: Routes = [

  { path: 'dashboard', component: DashboardComponent },
  { path: 'about', component: AboutComponent },
  { path: 'notifications', component: NotificationsComponent },
  { path: '', redirectTo: '/user-pages/login', pathMatch: 'full' },
  { path: 'user-pages', loadChildren: () => import('./user-pages/user-pages.module').then(m => m.UserPagesModule) },

user-pages.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
]
@NgModule({
  declarations: [LoginComponent, RegisterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class UserPagesModule { }

I want to show the login page only when executing.

Can anyone help me regarding this

Answer 1

You need to remove empty path redirection

const routes: Routes = [

  { path: 'dashboard', component: DashboardComponent },
  { path: 'about', component: AboutComponent },
  { path: 'notifications', component: NotificationsComponent },
  { path: 'user-pages', loadChildren: () => import('./user-pages/user-pages.module').then(m => m.UserPagesModule) }
];

and change user-page module routing like following

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
]

And add the routing in app components ngOnInit

ngOnInit(){
   this.router.navigate(['/user-pages']);
}