Angular child route keeps redirecting to parent

I’m trying to add child routes to a sidebar menu using Angular 12. When I … Read more Angular child route keeps redirecting to parent

I’m trying to add child routes to a sidebar menu using Angular 12. When I click on a child route link it briefly goes to the child component then automatically redirects back to the parent component. I can’t figure out why.

I declare all of my routes in the parent component’s routing module:

const routes: Routes = [
  {
    path: '',
    component: AppManagementComponent,
    resolve: {
      data: SupportingDataResolverService
    },
    children: [
      {
        path: 'users',
        loadChildren: () => import('./user-management/user-management.module').then((m) => m.UserManagementModule),
        data: {
          breadcrumb: 'Account Settings'
        }
      },
      {
        path: 'roles',
        loadChildren: () => import('./app-roles/app-roles.module').then((m) => m.ApplicationsRolesModule),
        data: {
          breadcrumb: 'Application Roles'
        }
      },
      {
        path: 'data',
        loadChildren: () => import('./data-management/data-management.module').then((m) => m.DataManagementModule),
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'orgcodes',
          },
          {
            path: 'orgcodes',
            loadChildren: () =>
              import('./data-management/organisation-codes/organisation-codes.module').then((m) => m.OrganisationCodesModule),
            data: {
              breadcrumb: 'Organisation Codes'
            }
          },
          {
            path: 'appdata',
            pathMatch: 'full',
            loadChildren: () =>
              import('./data-management/app-data/app-data.module').then((m) => m.AppDataModule),
            data: {
              breadcrumb: 'App Data'
            }
          },
          {
            path: 'usercodes',
            pathMatch: 'full',
            loadChildren: () =>
              import('./data-management/user-codes/user-codes.module').then((m) => m.UserCodesModule),
            data: {
              breadcrumb: 'User Codes'
            }
          }
        ]
      },

I link to the child routes in the parent component sidebar menu:

<mat-sidenav-container>
  <mat-sidenav
    mode="side"
    opened
    position="start"  >
      <mat-list>
        <mat-list-item
          class="sidebar-item"
          routerLink="users"
          routerLinkActive="selected"
        >Users
        </mat-list-item>
        <mat-list-item
          class="sidebar-item"
          routerLink="roles"
          routerLinkActive="selected"
        >
          Roles
        </mat-list-item>
        <mat-accordion>
        <mat-expansion-panel
           routerLink="data"
           routerLinkActive="selected"
          >
            <mat-expansion-panel-header>
              <mat-panel-title>
                Data Management
              </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-list>
              <mat-list-item
                class="sidebar-item"
                routerLink="data/orgcodes"
              ><mat-icon>arrow_right</mat-icon> Organisation Codes
              </mat-list-item>
              <mat-list-item
                class="sidebar-item"
                routerLink="data/appdata"
              ><mat-icon>arrow_right</mat-icon> App Data
              </mat-list-item>
              <mat-list-item
                class="sidebar-item"
                routerLink="data/usercodes"
              ><mat-icon>arrow_right</mat-icon> User Codes
              </mat-list-item>
            </mat-list>
          </mat-expansion-panel>
        </mat-accordion>       
      </mat-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

The router links to ‘users’ and ‘roles’ work fine. When I click on the ‘data’ router link it redirects to ‘data/orgcodes’ as it should, but when I click on one of the other child route links like ‘data/appdata’ or ‘data/usercodes’ it briefly goes to that particular child component then redirects back to ‘data/orgcodes’. If I remove the ‘orgcodes’ redirect, it will redirect back to ‘data’ instead.

I’ve tried changing the child routerLink syntax to "./data/usercodes" and the same thing happens. I tried changing it to "/data/usercodes" and got Error: Cannot match any routes. URL Segment: 'data/usercodes'. I also added patchMatch: 'full' to the child routes in the routing module and got the same result.

If I manually type in the child route into the browser it works like this: www.myapp.com/appmanagement/data/usercodes. Any help would be appreciated.

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *