Rerouting to child route not working as expected - angular 19

I have 2 components: claims-summary and claims-insights. When I am in claims-summary component, url will be http://localhost:4200/claims-summary/claimId/. When I navigate from claims-summary and claims-insights, new URL should be http://localhost:4200/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, URL is changed from http://localhost:4200/claims-summary/claimId/ to http://localhost:4200/claims-summary/claimId/claims-insights/type, but does not redirect to claims-insights component. What am I missing?

Continue reading...