Unable to fetch ID param for child routes

[rupamroy]

I have a web-module which has a the following routes defined among many of the rest. I have deleted the rest of the routes below apart from the dashboard and the repository-targets to show the issue.

const routes: Routes = [
  {
    path: '', redirectTo: 'web', pathMatch: 'full'
  },
  {
    path: 'web', component: WebComponent,
    children: [
      {
        path: '', redirectTo: 'dashboard', pathMatch: 'full'
      },
      {
        path: 'dashboard', component: DashboardComponent, canActivate: [SiteminderLoginGuard], data: {
          destinationRoute: 'web/dashboard'
        }
      },
      {
        path: 'repository-targets/:id', component: RepositoryTargetsComponent,
        children: [
          {
            path: '', redirectTo: 'list', pathMatch: 'full'
          },
          {
            path: 'list', component: TargetsComponent,  canActivate: [SiteminderLoginGuard], data: {
              destinationRoute: 'web/repositories'
            }
          },
          {
            path: 'target', component: EditTargetComponent,
              canActivate: [SiteminderLoginGuard], data: {
              destinationRoute: 'web/repositories'
            }
          }
        ]
      }
    ]
  }
];

Now web is a component which has a where dashboard and repository-targets components are displayed.

Now repository-targets component is having a where the TargetsComponent is displayed.

So when i am viewing the TargetsComponent the url link is http://localhost:9000/web/repository-targets/2022/list

In the TargetsComponent if i try to fetch the repositoryID like this

this.route.params.subscribe((val) => {
      if (val.id) {
        this.repositoryId = val.id;
      } else {
        throw Error('Cannot fetch repository Id from route');
      }
    });

Here it cannot fetch the val.id and throws and error.

Can you kindly let me know why is this happening.