Why I can't redirect to inner route?

Why, when I click on / link, it won't redirect me to /en/dashboard? It only redirects to /en.

But in the router, there is a rule that says "redirect to dashboard":

const routes: Route[] = [
{ path: '', redirectTo: '/en', pathMatch: 'full' },
{
path: ':lang',
component: ShellComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }, // <-- here second redirect
{ path: 'dashboard', component: DashboardComponent },
],
},
];

So I expect it to redirect to /en then make a sub redirect to dashboard so in the end I will get /en/dashboard.

How to do that in angular?

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Route, RouterModule } from '@angular/router';
@Component({
selector: 'dashboard',
template: `in dahsboard component`,
standalone: true,
})
export class DashboardComponent {}
@Component({
selector: 'shell',
template: `in shell component <router-outlet></router-outlet>`,
standalone: true,
imports: [RouterModule],
})
export class ShellComponent {}
const routes: Route[] = [
{ path: '', redirectTo: '/en', pathMatch: 'full' },
{
path: ':lang',
component: ShellComponent,
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
],
},
];
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, RouterModule],
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular 
</a>
<br><br>
<a [routerLink]="['/']">/</a><br>
<a [routerLink]="['/en']">/en</a><br>
<a [routerLink]="['/dashboard']">/dashboard</a><br>
<router-outlet></router-outlet>
`,
})
export class App {
name = 'Angular';
}
bootstrapApplication(App, { providers: [provideRouter(routes)] });

stackblitz demo

You are correct in expecting that clicking on the "/" link should redirect you to "/en/dashboard". The routes configuration you have is correct.

The problem might not be with the routes configuration, but it could be due to the Angular Router's lifecycle. When Angular Router redirects to a new path, it first deactivates the components from the previous route, then activates the components for the new route.

However, if the previous and new routes share the same components (as is the case with "/" and "/en"), Angular Router will not deactivate and re-activate the components, and thus will not re-evaluate the redirect.

To solve this issue, you can use the onSameUrlNavigation configuration option in the router module. This option configures how the router should behave if it receives a navigation request to the current URL.

Here is how you can modify your router module configuration:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this configuration, onSameUrlNavigation: 'reload' tells Angular Router to reprocess the routing pipeline every time it detects navigation to the current URL.

Please check your application after applying this change and let me know if the issue is resolved.

Hope this answer would be helpful.

====== Reply to Jon Sud =====

It's possible that the issue is related to the way redirectTo is used in the child route definition. In the Angular documentation, it's mentioned that:

The redirectTo property of the definition specifies the relative path of a redirection target.

In your case, the parent route is dynamic :lang, and when you try to use redirectTo: 'dashboard', it may not correctly resolve the route as it's relative to the parent.

One possible solution is to use an absolute path in the redirectTo. Here's how you could adjust your routes:

const routes: Route[] = [
  { path: '', redirectTo: '/en', pathMatch: 'full' },
  {
    path: ':lang',
    component: ShellComponent,
    children: [
      { path: '', redirectTo: '/en/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
    ],
  },
];

While this isn't a dynamic solution (it always redirects to '/en/dashboard'), it should work based on your current setup. To make it more dynamic, you may need to create a guard or a resolver to handle the redirection based on the dynamic :lang parameter.

Another solution could be to avoid the nested redirect and handle the redirect at the top level:

const routes: Route[] = [
  { path: '', redirectTo: '/en/dashboard', pathMatch: 'full' },
  {
    path: ':lang',
    component: ShellComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
    ],
  },
];

In this case, any request to the base URL will be redirected to '/en/dashboard' directly.

Please try these solutions and let me know if they work for you.

Victor Savkin one of core creators of Angular Router, and this is from his book named "Angular Router":

> One constraint the router imposes is at any level of the configuration
> the router applies only one redirect, i.e., redirects cannot be
> chained.

And the example in this book exactly as yours. So you can't use multiple redirects at once.