I am currently facing a challenge with routing in my Angular application. I have set up a page within a router-output on the route /products. This page contains another router-output which will display one of two possible children routes (/products/professional and /products/consumer).
The issue arises when a user visits /products without specifying a nested route. In such cases, I want them to be automatically redirected to /products/professional.
Here is an excerpt of my current routes setup:
const routes: Routes = [
{
path: '',
component: ProductsComponent, // this component includes `router-outlet` for child routes sharing the same header
redirectTo: '/professional', // this approach does not work as intended
children: [
{
path: 'professional',
loadComponent: () =>
import('...').then((c) => c.AComponent)
},
{
path: 'consumer',
loadComponent: () =>
import('...').then((c) => c.BComponent)
}
]
}
];
Unfortunately, using both redirectTo and children for the same route results in an error:
Error: NG04014: Invalid configuration of route '{path: "products/", redirectTo: "professional"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.
I have come across similar questions and solutions while researching this issue, but I am struggling to adapt those answers to fit my specific scenario.