Make Nested route default route - [Angular]

Question

In my Angular-6 project, I want a nested route to be the default route. That means if the user hits "localhost:4200" in browser he'll be redirected to "localhost:4200/dashboard/headlines". I wrote below route configuration, but it is not working. 1. what am I doing wrong? 2. Is it possible to implement the same for lazy loading module?

const routes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: NewsComponent,
    children: [
      { path: '', redirectTo: '/headlines', pathMatch: 'full' },
      { path: 'headlines', component: HeadLinesComponent },
      { path: 'detail', component: DeatilNewsComponent }
    ]
  }
]

news.component.html

<div>News Work</div>
<router-outlet></router-outlet>

app.component.html

<router-outlet></router-outlet>

try removing backslash, redirectTo: '/dashboard' => redirectTo: 'dashboard' and redirectTo: '/headlines' => redirectTo: 'headlines' — imanshu15, Apr 08 '19 at 17:49

Sourav Dutta · Answer 1 · 2019-04-08T18:52:38.407

Here is your Working Stackblitz Demo

Modify your app.routing.ts to the code below:~

import { Routes } from '@angular/router';
import { NewsComponent } from './news.component';
import { HeadLinesComponent } from './head-lines.component';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }, {
    path: 'dashboard',
    component: NewsComponent,
    pathMatch: 'prefix',
    children: [
      { path: '', redirectTo: 'headlines', pathMatch: 'full' },
      { path: 'headlines', component: HeadLinesComponent }
    ]
  }
];

Exact duplicate here

Check here for more on Lazy loading the default child route

Check out the official Angular Documentation

Hope this helps.

score 0 · Answer 2 · answered Apr 08 '19 at 17:53

Convert your routes to this:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    component: NewsComponent,
    children: [
      { path: '', redirectTo: 'headlines', pathMatch: 'full' },
      { path: 'headlines', component: HeadLinesComponent }
    ]
  }
]

Working example here

Make Nested route default route - [Angular]

2 Answers2