I am facing an issue while trying to access a component that requires 2 URL parameters. Despite providing the parameters, I encounter an error indicating that the routes cannot be matched.
const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'home/:dataClass',
},
canActivate: [ProtectedRoutesGuard],
component: DataViewerRouteComponent,
},
{ // ISSUE OCCURS BELOW
path: '/:dataClassName/:id',
data: {
name: 'Service Status'
},
component: DataViewerRecordsComponent,
},
{
pathMatch: 'full',
path: '',
data: {
name: 'Service Status',
module: ['data-viewer']
},
canActivate: [ProtectedRoutesGuard],
component: DataViewerHomeComponent,
},
{
pathMatch: 'full',
path: '**',
redirectTo: '/data-viewer',
}
];
Here is how the navigation is implemented:
this.router.navigate([this.dataClassName + '/' + this.id]);
The data is correctly assigned to the route, but it fails to match any available routes, resulting in the following error message:
core.js:4002 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'benchmarks/101723102'
Error: Cannot match any routes. URL Segment: 'required/1234'