For SEO and legacy external links going to our site we need to provide fallback routes for deprecated urls. Things get tricky with named outlets. Trying to find the right settings now for specifying routes for redirection to updated named outlet.
E.g:
https://url.com/prod/000(myOutlet:foo)
should redirect to
https://url.com/prod/000(newOutlet:some/foo)
while 000 is dynamic of course
Now some code that reflects the old and new routes:
OLD:
https://url.com/prod/000(myOutlet:foo)
https://url.com/prod/000(myOutlet:bar)
{
path: ':vars',
outlet: 'myOutlet',
component: VarsComponent
}
NEW:
https://url.com/prod/000(newOutlet:some/error)
https://url.com/prod/000(newOutlet:some/empty)
https://url.com/prod/000(newOutlet:some/foo)
https://url.com/prod/000(newOutlet:some/bar)
{
path: 'some',
outlet: 'newOutlet',
component: VarContainerComponent,
children: [
{
path: 'empty',
component: VarEmptyComponent
},
{
path: 'error',
component: VarErrorComponent
},
{
path: ':var', // OLD implementation should point here
component: VarContentComponent
}
]
}
How to specify the OLD implementation to redirectTo the NEW path: ':var' route?
// fake assumption, redirectTo code not working
// 1. simpler solution, using just a static route (currently all external links use this one)
{
path: 'foo',
outlet: 'myOutlet',
redirectTo: '**(newOutlet:some/foo)',
},
// 2. more advanced solution, variables being redirected
{
path: ':var',
outlet: 'myOutlet',
redirectTo: '**(newOutlet:some/:var)',
},
Of course it is to mention that myOutlet does not exist anymore in the new deployed app, still we need to be able to react on it.
I created a stackblitz which can be used as playground, it consists for a route with dynamic id and named router-outlet as mentioned in this topic. https://stackblitz.com/edit/angular-router-outlet-redirectto