Angular Router Navigate is Reloading Lazy Loaded Components in an Infinite loop

I have ModuleA which is lazy loaded and have below given components and their routes;

path: 'JobView/:id', component: JobViewComponent, children: [
  { path : '', redirectTo: 'AppliedCandidates', pathMatch: 'full'},
  { path: 'AppliedCandidates', component: AppliedCandidatesComponent },
  { path: 'AssignCandidates', component: AssignCandidatesComponent }
]

Content of JobViewComponent looks like this;

  <div class="col-xl-3 pr-3">
    <job-detail-view> </job-detail-view>
  </div>
  <div class="col-xl-9 pl-3">
    <div class="portlet">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

When I navigate to any child route using router navigate,

this.router.navigate(['../AppliedCandidates'], {
      relativeTo: this.route});

It keeps on reloading job-detail-view component as well which does not happen in eager loading case. Any help to avoid this overhead of reloading this component will be appreciated.