Angular 16 Route from Child to another Child Module

Question

I want to route from a child to a completely different child in another lazy loaded module. I keep getting the error "Cannot match any routes - clients/client/clientreport"

This is my first lazy loaded module. If you notice when the user navigates to the child of client, I want it to redirect to reports which exist in another lazy loaded module

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'clients', //site.com/clients
                component: ClientGridComponent,
                data: {
                    role: ['ADMIN', 'STAFF'],
                    breadcrumb: 'Client Grid',
                },
            },
            {
                path: 'client', //site.com/clients/client:id
                component: ClientComponent,
                data: {
                    role: ['ADMIN', 'STAFF'],
                    breadcrumb: 'Client Details',
                },
                children: [
                    {
                        path: 'clientreport',//site.com/clients/client:id/clientreport
                        **redirectTo: 'reporting/reports/reportviewer'**,
                    },
                ],
            },
            {
                path: '',
                redirectTo: 'clients',
                pathMatch: 'full',
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes), CommonModule],
    exports: [RouterModule],
})
export class ClientRoutingModule {}

here is the second lazy loaded module of where I want clientreporting to navigate to

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'reports', //sitename.com/reports
                component: ReportGridComponent,
                data: {
                    breadcrumb: 'Report Grid',
                },
            },
            {
                path: 'reportviewer', //sitename.com/reports/reportviewer
                component: PDFViewerComponent, <-- Want to navigate to here from other route
                data: {
                    breadcrumb: 'Report Viewer', 
                },
            },

            {
                path: '',
                redirectTo: 'reports',
                pathMatch: 'full',
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes), CommonModule],
    exports: [RouterModule],
})
export class ReportRoutingModule {}

Answer 1

I guess, the question is why redirectTo: 'reporting/reports/reportviewer' doesn't work in this case, right? In order to make it work you have to put leading forward slash like this redirectTo: '/reporting/reports/reportviewer' This will give router a hint that the navigation should happen relatively to the root route.