Angular 5 routing with nested components

Question

OK So for sake of simplicity lets say I have 3 components: a parent component and two other components (child A and child B).

I want parent component to have an url prefix of '/parent' and contain one of the two other components, component A by default, else B, who have their own url prefixes of 'childA' and 'childB' respectively. Also I do not want parent component to to be viewable by itself, it must have either childA or childB viewable and if '/parent' is called it will automatically re-route to '/parent/childA'.

So far this is what I have in my router and it is not working I am getting an invalid path error on the console when I route to '/parent' and when I route to '/parent/child[AorB]' my browser lags forever and never routes:

{
  path: 'parent', component: ParentComponent,
  children : [
    {
      path: '',
      redirectTo: 'childA' 
    },
    {
      path: 'childA',
          component: ChildAComponent
    }, {
      path: 'childB',
      component: childBComponent
    }
  ]
}

parent's template is just a router-outlet like so:

<router-outlet></router-outlet>

RudolphRedNose · Accepted Answer · 2018-03-16 06:44:11Z

2

Needed to add pathMatch: 'full' like so:

{
  path: 'parent', component: ParentComponent,
  children : [
    {
      path: '',
      redirectTo: 'childA',
      pathMatch: 'full' //<--------- Need this here
    },
    {
      path: 'childA',
          component: ChildAComponent
    }, {
      path: 'childB',
      component: childBComponent
    }
  ]
}

answered Mar 16, 2018 at 6:44

RudolphRedNose

1731 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DeBorges · Accepted Answer · 2018-09-17 08:50:29Z

0

Make sure you have 2 router-outlet defined in your html, so angular would know which is the parent and which is the child..

How is the code for your links? For the children, user the './', like so:

[routerLink]="['./childA']"

For parent, you can go directly...

[routerLink]="['parent']"

answered Sep 17, 2018 at 8:50

DeBorges

7401 gold badge7 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular 5 routing with nested components

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related