Rerouting to child route not working as expected

I have 2 components: claims-summary and claims-insights. When I am in the claims-summary component, the URL will be "/claims-summary/claimId/". When I navigate from claims-summary and claims-insights, the new URL should be "/claims-summary/claimId/claims-insights/type". So I added a child router.

app.routes.ts:

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { ClaimsSummaryComponent } from './components/claims-summary/claims-summary.component';
import { ClaimsInsightsComponent } from './components/claims-insights/claims-insights.component';
import { ClaimsComponent } from './components/claims/claims.component';

export const routes: Routes = [
    { path: '', component: LoginComponent }, // Default route for login
    { path: 'home', component: HomeComponent }, // route for home
    { path: 'claims', component: ClaimsComponent }, // route for claims
    {
        path: 'claims-summary/:claimID',
        component: ClaimsSummaryComponent,
        children: [
            {
                path: 'claims-insights/:type',  
                component: ClaimsInsightsComponent,
            },
        ],
    },
    // { path: 'claims-summary/:claimID', component: ClaimsSummaryComponent }, // route for claims summary
    // { path: 'claims-insights/:type', component: ClaimsInsightsComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' }, // Redirect any unmatched route to error page (Reminder to ask Akanksha to design error page)
];

claims-summary.component.ts:

// for claim ID from previous page
claimId: string | null = null;

constructor(private activatedRoute: ActivatedRoute) {}  
redirectTo(type: string) {
    const claimID = this.activatedRoute.snapshot.paramMap.get('claimID');
    if (claimID) {
      this.router.navigate(['claims-insights', type], { relativeTo: this.activatedRoute });
    } else {
      console.error("reroute is failing"); 
    }
}  

claims-insights.component.ts:

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule } from '@angular/common';
import axios from 'axios';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatCardModule } from '@angular/material/card';
import { environment } from '../../../environments/environment';
import { HeaderComponent } from "../../views/header/header.component";
import { FooterComponent } from '../../views/footer/footer.component';
import { GenAssistComponent } from '../../views/gen-assist/gen-assist.component';
import { MatChipsModule } from '@angular/material/chips'; 
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list'

interface SummaryData {
  [key: string]: {
    details: string;
    lastUpdated: string;
  };
}

@Component({
  selector: 'app-claims-insights',
  imports: [
    CommonModule,
    MatExpansionModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MatCardModule,
    HeaderComponent,
    FooterComponent,
    GenAssistComponent,
    MatChipsModule,
    MatIconModule,
    MatListModule
],
  templateUrl: './claims-insights.component.html',
  styleUrl: './claims-insights.component.scss'
})
export class ClaimsInsightsComponent {

  data: any = null; // Holds the fetched data
  type: string = ''; // Holds the type (medical or financial)
  isLoading: boolean = true; // To show a loading spinner or message
  queryType: string='';

  constructor(private activatedRoute: ActivatedRoute) {}

  async ngOnInit(): Promise<void> {
    // Get the type parameter from the route
    this.type = this.activatedRoute.snapshot.paramMap.get('type') || '';
    
    // Determine the query_type based on the type parameter
    switch (this.type) {
      case 'financial':
        this.queryType = 'detailed_financial';
        break;
      case 'litigation':
       this.queryType = 'detailed_litigation';
        break;
      case 'medical':
       this.queryType = 'detailed_medical';
        break;
      default:
        console.error('Invalid type parameter.');
        this.isLoading = false;
        return;
    }

    // Construct the API URL
    const claimId = 'claimId'; // Replace with dynamic claimId if needed... My plan is to put a function here
    const url = `${environment.apiBaseUrl}?query_type=${this.queryType}&claim_id=${claimId}`;

    // Fetch the data
    try {
      const response = await axios.get(url);
      console.log('API Response:', response.data); // Debug: Log API response
      this.data = response.data; // Store API response
    } catch (error) {
      console.error(`Error fetching ${this.type} data:`, error);
      this.data = `Error fetching ${this.type} data.`;
    } finally {
      this.isLoading = false; // Hide the loading spinner
    }
  }

  goBack() {
    window.history.back();
  }

}  

When I call redirectTo(type: string) {} function, the URL is changed from "/claims-summary/claimId/" to "/claims-summary/claimId/claims-insights/type", but does not redirect to the claims-insights component. What am I missing?

As ClaimsInsightsComponent is the nested route under the ClaimsSummaryComponent, it only can be shown when adding the <router-outlet> element in the view of ClaimsSummaryComponent.

claims-summary.component.html

<router-outlet></router-outlet>

Note that, this will show both ClaimsSummaryComponent and ClaimsInsightsComponents in the same view when you browse "/claims-summary/{claimId}/claims-insights/{type}".

Demo (Nested route) @ StackBlitz

If you want to show only the ClaimsInsightsComponent when browsing the mentioned URL, you must flatten the URL instead of nesting the routes.

export const routes: Routes = [
  ...
  {
    path: 'claims-summary/:claimID',
    component: ClaimsSummaryComponent,
  },
  {
    path: 'claims-summary/:claimID/claims-insights/:type',
    component: ClaimsInsightsComponent,
  },
  ...
];

Demo (Flatten route) @ StackBlitz