CODEWITHSUNDEEP
angularangular-routingangular-module
J4N
J4N

Reputation: 20727

How to properly declare a child route for the angular router?

I've the following routing:

//Root routes
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'documents', loadChildren: () => import('./documents/documents.module').then(m => m.DocumentsModule) },
      { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
      { path: 'accounts', loadChildren: () => import('./account/account.module').then(m => m.AccountModule) },
    ],
    canActivate: [AuthGuard],
  },
  {
    //The goal of separating auth and account is to have the pages to becomes authentified in the Auth module, with a totally different layout
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
    canActivate: [UnauthGuard],
  },
];

and then, for the child "AccountModule", I've the following routes:

const routes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: '', redirectTo: 'profile', pathMatch: 'full' },
];

My AuthenticatedLayoutComponent has basically just a header/footer and a router-outlet:

<div id="container" class="flex flex-column w-screen">
  <header class="flex-grow-0 z-1">
    <app-header></app-header>
  </header>
  <main class="flex-grow-1 z-0">
    <router-outlet></router-outlet>
  </main>
  <footer class="flex-grow-0 z-1">
    <app-footer></app-footer>
  </footer>
</div>

Why is this considered a valid path and how do I prevent it?

Upvotes: 1

Views: 2112

Answers (2)

J4N
J4N

Reputation: 20727

Strongly inspired by @JSONDerulo answer:

Since I cannot use lazy loading but I still would like to have my rules enclosed in my accounts module:

  1. I now declare the module in my AppModule
  2. I export my account routes and use them as childs in my AppRoutingModule
  3. I removed the import of the AccountRoutingModule of my AccountModule

AppRoutingModule:

import { routes as accountsRoutes } from './account/account-routing.module';
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'documents', loadChildren: () => import('./documents/documents.module').then(m => m.DocumentsModule) },
      { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
      { path: 'accounts', children: accountsRoutes },
    ],
    canActivate: [AuthGuard],
  },
  {
    //The goal of separating auth and account is to have the pages to becomes authentified in the Auth module, with a totally different layout
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
    canActivate: [UnauthGuard],
  },
];

AccountRoutingModule

export const routes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: '', redirectTo: 'profile', pathMatch: 'full' },
];

Upvotes: 0

JSON Derulo
JSON Derulo

Reputation: 17580

Like figured out in the comments, the problem is that the application root module imports AccountModule because it contains something that the application root module needs. In that moment, the route definition of the AccountModule is loaded, which exposes the /profile route.

One way to fix it, is to resolve the dependency between the root module and the AccountModule, and stop importing it. Then the module with its route definition is only loaded via lazy loading, making the /profile route unavailable. But possibly this will be a lot of effort.

Another quicker way to fix it, is to remove lazy loading from the /accounts route and define its sub-routes directly in your root routing module:

//Root routes
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      // ...
      {
        path: 'accounts',
        children: [
          { path: 'profile', component: ProfileComponent },
          { path: '', redirectTo: 'profile', pathMatch: 'full' },
        ]
      },
    ],
    canActivate: [AuthGuard],
  },
  // ...
];

Upvotes: 2

Related Questions