Is it possible to chain route redirects in loaded modules? (Angular)

Viewed 409

I want to be able to chain route redirect paths with unloaded modules in Angular so I can keep the path info in the relative module configuring the route paths.

e.g. In app-routes.module.ts

const appRoutes: Routes = [
  { path: 'home', loadChildren: 'app/home/home.module#HomeModule' },
  { path: 'feature',  loadChildren: 'app/feature/feature.module#FeatureModule' },
  //----- App Root Routing Necessary Safeguards (AppRoutingModule) ----------
  { path: '',   redirectTo: '/home', pathMatch: 'full' }, /* '/home' only so I can change the relative route paths in home-routing.module without going back here */
  { path: '**', component: PageNotFoundComponent }
];

e.g. In home-routes.module.ts.. It needs to also handle a redirect. (even from a previous redirect)

const homeRoutes: Routes = [
  { path: '',   redirectTo: '/home/start', pathMatch: 'full' }, /* Placed first since it's a first-match win in config */
  {
    path: '',
    component: HomeComponent,
    children: [
        { path: 'start', component: startComponent },
        { path: 'component-two', component: ComponentTwo },
        { path: 'component-three', component: ComponentThree },
    ]
  },
];

I am able to get my redirect when I use the path /home, but not when it uses the default empty path /.

e.g. Redirect behavior on loading the app (urls at left and redirects at right):

  • / ---> /home
  • /home --> /home/start

Desired behavior:

  • / ---> /home/start
  • /home --> /home/start

What config should I use at home-routes.module to achieve the desired effect?

0 Answers
Related