Home Why can I access an component in a sub module via multiple routes in Angular 15?

Questions

Why can I access an component in a sub module via multiple routes in Angular 15?

January 23, 2023

TLDR; I am learning Angular and prepending routes from a sub modules, makes the module available on its original url aswell as the url with the prefix.

Long:
I am learning Angular and I am trying to create a web app with multiple pages and components that work together.

One of the first thing I did, was creating a separate module, beside the main app module, that hosts setting pages. I added routing to this module.

The paths used in this sub module (PagesSettingModule) are using nested routes. In my AppRoutingModule, I have added a routing, using loadChildren, to load the PagesSettingModule using a prefix, i.e. under /pages. The ProjectsComponent is available on /pages/settings/projects, which is expected behavior. Before adding the prefix, the page was accesible on /settings/projects. Now it is accessible both on /pages/settings/projects as well as /settings/projects.

Question is: how can I prevent the routing in a module to be registered double?
So far I can understand, the routing is both loaded when the PagesSettingRoutingModule is loaded (using RoutingModule.forChild) and in the AppRoutingModule using the loadChildren.

I have enabled tracing and I see that both /pages/settings/projects and /settings/projects are matched. The page is working properly using both urls.

I have created a small utility function that prints out the knowns routes in Router.config.
Since the /pages is lazy loaded, I printed the _loadedChildren and it showed the correct routes, as well as the original ones from the PagesSettingRoutingModule.

The code below: I have removed the imports.

AppRoutingModule:

const routes: Routes = [
  // routes
  { path: 'pages', loadChildren: () => import('./modules/pages-settings/pages-settings.module')
           .then((m) => m.PagesSettingsModule) },

  // redirects
  { path: '', redirectTo: 'pages/settings/projects', pathMatch: 'full'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule{ }

AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    // ... other modules such as PagesSettingsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

PagesSettingRoutingModule

const routes: Routes = [
  // routes
  { path: '', children: [
    { path: 'settings', children: [
      { path: 'projects', component: ProjectSettingsComponent, children: [
        { path: 'detail', component: ProjectSettingsDetailComponent },
        { path: 'edit', component: ProjectSettingsEditComponent }
      ]},
    ]}
  ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes) ],
  exports: [RouterModule]
})
export class PagesSettingsRoutingModule { }

PagesSettingsModule

@NgModule({
  declarations: [
    ProjectSettingsComponent,
    ProjectSettingsDetailComponent,
    ProjectSettingsEditComponent,
  ],
  imports: [
    PagesSettingsRoutingModule,
    CommonModule,
    // other modules
  ]
})
export class PagesSettingsModule { }