What is the right way to route to another root node from a child node in angular?

Question

I have a login page, and a lazy loaded module whose children constitutes most of the pages within the app. Here is a look at app-routing.module.ts

 const routes: Routes = [{ path: '', loadChildren: './main/main.module#MainModule' }, { path: '', component: LoginLayoutComponent, children: [{ path: 'login', component: LoginComponent }] }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}

Now I have the main module which has several child pages. Let's take a look at main-routing.module.ts

 onst routes: Routes = [{ path: '', canActivate: [AuthGuard], component: LayoutComponent, children: [{ path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'user', loadChildren: './user/user.module#UserModule' }, { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }, { path: '**', component: PageNotFoundComponent } ] }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class MainRoutingModule {}

Within the RouteGuard, if user is not logged in, we re-directs them to /login

    this.router.navigate(['/login']);

The problem is that the router tries to find path:'login' within the routes of MainRoutingModule, while 'login' is actually part of AppRoutingModule's routes. Any help would be appreciated.

Answer 1

I believe the router is taking the first match in your app-routing module, which you have specified as '' . Then it is loading the children which is the main-routing module. Since both the main and login paths are the same - '' - the router will never make it to the second match. Consider making the login parent route path 'login' and making the login child path as '' .

Edit 1:

It seems the router is still matching the '' in the path value of the Main Module. Consider re-ordering the Login component above the Main Module and/or add a value to the path of the Main Module other than empty - '' .

As an aside, you are basically lazy loading your entire app all at once. Over time, you might consider pulling all of those children out of the Main Module and lazy loading them from the App Routing module directly. (this would also solve your problem as you wouldn't have the empty - '' - path in the App Routing module).

When you use empty path - '' - consider adding a pathMatch strategy of 'full' per the Angular Route documentation so you won't run into this problem again as technically every root path would match an empty - '' - segment before any other following segments (this same problem you are facing here).

Edit 2:

const routes: Routes = [
  {
    path: 'login',
    component: LoginLayoutComponent,
    children: [{
      path: '',
      pathMatch: 'full',
      component: LoginComponent
    }]
  },
  {
    path: 'main',
    loadChildren: () => import('./main/main.module').then(m => m.MainModule)
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];