How to load child route by default in angular 2

Question

At the start of application i want to load child route.

Right now URLcome but respective component not load on that section but when again hit the actual URL it comes.

like route configure is

  const appRoutes: Routes = [
        { path: 'a', component: AComponent,
         children:[
                   { path:'x',component:AXcomponent }
                   ]
        },
        { path: 'b', component: bComponent, }
]

Now i want to load path a/x how i will load at the start of page ?

Maybe I didn't understand correctly, but you should be able to use `{ path: '', redirectTo: '/a/b', pathMatch: 'full' },` so that your empty path ' ' redirects to '/a/b' and then loads the corresponding component. — Alex Beugnet, Jan 18 '17 at 10:55
it not working url is set but first time component not loaded but when hit direct url then its loaded — Rituraj ratan, Jan 19 '17 at 05:47

score 116 · Accepted Answer · answered Jan 18 '17 at 10:59

116

Add empty path routes as redirect automatically

const appRoutes: Routes = [
    {
        path:'',
        redirectTo: 'a',
        pathMatch: 'full' 
    },
    {
        path: 'a',
        component: AComponent,
        children:[
            {
                path:'',
                redirectTo: 'x',
                pathMatch: 'full' 
            },
            {
                path:'x',
                component: AXcomponent 
            }
        ]
    },
    { 
        path: 'b',
        component: bComponent
    }
];

answered Jan 18 '17 at 10:59

Santanu Biswas

4,699
2
22
21

in url changes are come like url set /a/b but respective component not loaded – Rituraj ratan Jan 19 '17 at 05:46
its working thanks there is something error in my code now its working.:) – Rituraj ratan Jan 19 '17 at 06:19
Great... glad I could help! – Santanu Biswas Jan 19 '17 at 07:14
4

How would it be if the child route contains an outlet? – Luis Ruiz Figueroa Nov 18 '17 at 13:20
@LuisRuizFigueroa Have you got any idea for outlet scenario ? – ARJUN Aug 02 '19 at 05:26
Hi, I have a similar concern. What if I want to see a path instead of living it blank. In my case I have an authentication module, that has many components (register, login ...). I would like to see in my page url www.mywebpage.com/authentication/login. With @SantanuBiswas approach I wouldn't be able to see login in the url. Any workaround to this similar concern? Thanks in advice. – MANZARBEITIA Aug 16 '22 at 17:09

score 6 · Answer 2 · answered May 17 '18 at 01:48

The accepted answer is no good if your child route contains an outlet.

For example I am displaying an 'order' by ID and using a named outlet 'detail' for the summary as well as other panels.

/orders/5000001/(detail:summary)
/orders/5000001/(detail:edit)

Because these URLS are so ugly I also wanted the following two to redirect:

/orders/5000001           =>    /orders/5000001/(detail:summary)
/orders/5000001/summary   =>    /orders/5000001/(detail:summary)

So I tried a componentless redirect in the child:

{ path: '', pathMatch: 'full', redirectTo: '(detail:summary)' }

This fails because a 'redirectTo' needs to be absolute (I'm sure there's a complex technical reason for this). So then I tried this:

{ path: '', pathMatch: 'full', redirectTo: '/order/:id/(detail:summary)' }

And that fails because :id is not a named variable in the context of the child.

So in the end I figured this out:

 children: [

     { path: ':id', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     { path: ':id/summary', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     {
         // this goes in the main router outlet
         path: ':id', component: OrderFulldetailsComponent,

         children: [

             { path: 'summary', component: OrderSummaryComponent, outlet: 'detail' },
             { path: 'edit', component: OrderEditComponent, outlet: 'detail' }
         ]
     }
 ]

Note it is important to do pathMatch: 'full' on path: ':id' or it will match when you hit /:id/(detail:summary) and go nowhere.

How to load child route by default in angular 2

2 Answers2