Angular wildcard redirectTo not working

Question

I have the following wildcard

const routes: Routes = [
    {
        path: '',
        children: [
             {
                path: 'list/:id',
                component: ListComponent
            },
            {
                path: 'view/:id',
                component: ViewComponent
            },
            {
                path: 'edit/:id',
                component: EditComponent
            },
            {
                path: '**',
                redirectTo: 'list/:id',
                pathMatch: 'full'
            }

        ]
    }
];

the :id is a placeholder for the id that I need to get from backend. The wildcard is not working (not redirecting me the list component), giving me the following error

EXCEPTION: Uncaught (in promise): Error: Cannot redirect to 'list/:id'. Cannot find ':id'.
Error: Cannot redirect to 'list/:id'. Cannot find ':id'.

. Any idea guys? thanks in advance.

Answer 1

How should the router know to WHICH list you want to navigate if the users enters ANY invalid route?

Should that :id be 0, 33 or even 1337? The router can not know!

Only possible way would be to define a fallback router without a parameter or define one:

{
    path: '**',
    redirectTo: 'list/77', // put your fallback-id here !!
    pathMatch: 'full'
}

better would be to create a site like 404 error . Show a message like page not found and put some navigation options to the user.. maybe an overview of all list or whatever..