Angular 8 - child routerLink doesn't work

Question

I want to navigate from one page to another, from one component to another:

const routes: Routes = [
  {
    path: '',
    component: UploadPageComponent,
    children: [
      {
        path: 'frameworks',
        component: FrameworksSceneComponent,
        pathMatch: 'full',
        children: [
          {//doesn't work
            path: 'questionnaire',
            component: QuestionnaireComponent,
          },
        ],
      },
      {
        path: 'documents',
        component: DocumentsSceneComponent,
        pathMatch: 'full',
      },
      {//works
        path: 'questionnaire',
        component: QuestionnaireComponent,
        pathMatch: 'full',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class UploadRoutingModule {
}

My template (FrameworksSceneComponent):

 <a [routerLink]="['questionnaire']">aaaaaaaaaaaaaaaaaaaa</a>

but this works (FrameworksSceneComponent):

<a [routerLink]="['/private/upload/questionnaire']">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a>

What's wrong with my nested links? WHy after clicking on aaaaaaaaaaaaaaaaaa I'm redirected to my main page. ON the other hand link bbbbbbbbbbbbbbbb works, but in thus case the link is not a child link.

Answer 1

The way you implemented the nested route, angular looking for a <router-outlet> in your FrameworksSceneComponent.html. try implementing like below. not sure why its navigate to the main page.

  routes: Routes = [
    {
      path: "",
      children: [
        {
          path: "",
          component: UploadPageComponent
        },
        {
          path: "frameworks",
          children: [
            {
              path: "",
              component: FrameworksSceneComponent,
              pathMatch: "full"
            },
            {
              //should  work
              path: "questionnaire",
              component: QuestionnaireComponent
            }
          ]
        },
        {
          path: "documents",
          component: DocumentsSceneComponent,
          pathMatch: "full"
        },
        {
          //works
          path: "questionnaire",
          component: QuestionnaireComponent,
          pathMatch: "full"
        }
      ]
    }
  ];