1

I want to navigate nested child routes using children inside app-routing.ts file. But my components not get called.

code is as follows: app-routing.ts file

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SubmitFeedbackComponent } from './submit-feedback/submit-feedback.component';
 import { MenuOptionsComponent } from './menu-options/menu-options.component';
 import { InteviewDetailsComponent } from './menu-options/inteview-details/inteview- 
 details.component';
 import { EditFeedbackComponent } from './menu-options/edit-feedback/edit-feedback.component';
 import { SkillListComponent } from './menu-options/skills/skill-list/skill-list.component';
 import { SkillAddComponent } from './menu-options/skills/skill-add/skill-add.component';
 import { SkillEditComponent } from './menu-options/skills/skill-edit/skill-edit.component';

 const routes: Routes = [
 {
 path: 'menu-list',
 component: MenuOptionsComponent,
 children: [

  {
    path: 'inteview-details',
    component: InteviewDetailsComponent,
    pathMatch: 'full'
  },
  {
    path: 'edit-feedback',
    component: EditFeedbackComponent,
  },

  {
    path: 'skill-list',
    component: SkillListComponent,
    children:[
      { path: 'skill-add', component: SkillAddComponent },
      { path: 'skill-edit', component: SkillEditComponent },
  
    ]
  }
 ]
   },
    ];

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

Below is the folder structure

enter image description here

I'm hitting URL is like : http://localhost:4200/menu-list/skill-list/skill-add

As per above URL only up to skill list component is loading. skill-add is getting inside URL but on browser skill-add component is not loading. Also no any errors is there. Please let me know what I can do there.

Swapnali Botre
  • 101
  • 1
  • 13

1 Answers1

1

I feel you're confused about router children. A router children is when you want to have a component and, inside it, another component. For this your parent component should to have a <router-outlet></router-outlet>, e.g.

Your main.component is

<router-outlet></router-outlet>

And your SkillListComponet like

<p>I'm the SkillListComponent</p>
<router-outlet></router-outlet>

But you can to have a path like (see that it's not belong to any "children"

{path: 'skill-list/skill-add,component: SkillAddComponent }

And the "SkillAddComponent" is render in the main.component

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • this is only inside of main.component.ts file not in skill-list – Swapnali Botre Jun 22 '22 at 07:01
  • skill-list and skill-add both are child of main.component.ts file. When I clicking on skill-list button from menu-item skill list get displayed and url like menu-list/skill-list. But when I'm clicking on skill-add button from skill-list I need to get skill-add component there and URL should be menu-list/skill-list/skill-add – Swapnali Botre Jun 22 '22 at 07:02
  • Then define the path `'skill-list/skill-add` and the path `skill-list` in root (not inside children) – Eliseo Jun 22 '22 at 07:23
  • Hi @Eliseo If we declared skill-list in root. Then I'm not able to get menu-list/skill-list. I'm getting error like this :-Error: Cannot match any routes. URL Segment: 'menu-list/skill-list – Swapnali Botre Jun 22 '22 at 07:33
  • Then declare `menu-list/skill-list/skill-add` and `'menu-list/skill-list/skill-add`. The "key" is that if you use children, the component should to have a "" and is in this router-outlet where Angular render the component – Eliseo Jun 22 '22 at 07:41
  • menu-list/skill-list/skill-add I'm getting this URL only. after click on skill-list from menu-list. But after click on skill-add from skill-list. only URL gets changed to "menu-list/skill-list/skill-add" but skill-add component not loaded. – Swapnali Botre Jun 22 '22 at 11:38