CODEWITHSUNDEEP
angular
KumailR
KumailR

Reputation: 505

Issue with the multiple child component with different router-outlet

The routing of the app was all working fine. Just with some extra logging around the angular life-cycle of the components, when I hit the URL /employee/1 and when I switch to employee/1/leaves, actually it destroys/re-creates the EmployeeComponent with, which is obviously the issue with how I wrote the routes.

  routes = [ 
      {
        path: 'employee/:employeeId',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: EmployeeNavbarComponent, outlet: 'navbar-options'}
        ]
      },
    {
        path: 'employee/:employeeId/leaves',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: NavbarComponent, outlet: 'navbar-options'},
          {path: '', component: LeaveComponent, outlet: 'main-content'}
        ]
      }
    ]

So I try fixing the routes as follows and fall into this issue which I am not understanding what going wrong here, I search some articles and do like I did. The only difference in my case is the two different router-outlet.

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '404'
Error: Cannot match any routes. URL Segment: '404'```


      {
        path: 'employee/:employeeId',
        component: EmployeeDetailComponent,
        children: [
          {path: '', component: EmployeeNavbarComponent, outlet: 'navbar-options'},
          {path: 'leaves', component: LeaveComponent, outlet: 'main-content'}
        ]
      }

Any help?

Upvotes: 0

Views: 319

Answers (1)

Binara Thambugala
Binara Thambugala

Reputation: 776

For Lazy loading Angular read : https://angular.io/guide/lazy-loading-ngmodules

  1. You should create feature module for employee.
  2. Then create separate EmployeeRountingModule (employee.rounting.module.ts) for that Newly created EmployeeModule(employee.module.ts).

EmployeeRountingModule (employee.rounting.module.ts)

const routes: Routes = [
 {
   path: 'view/:id',
   component: EmployeeProfileComponent,
   canActivate: [AuthGuardService],
   data: { title: 'Profile' }
 },
 {
   path: ':id/leaves',
   component: EmployeeLeavesComponent,
   canActivate: [AuthGuardService],
   data: { title: 'Leaves' }
 },
];

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

EmployeeModule (employee.module.ts)

@NgModule({
  declarations: [
    EmployeeProfileComponent,
    EmployeeLeavesComponent
  ],
  imports: [
    EmployeeRountingModule
  ]
})
export class EmployeeModule {}

And AppRoutingModule (app.routing.module.ts)

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: '',
        redirectTo: 'dashboard'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: 'employees',
        loadChildren: () =>
          import('../home/employee/employee.module').then(mod => mod.EmployeeModule)
      },
    ]
  }
];

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

Upvotes: 1

Related Questions