Angular routing: Empty route path getting ignored

Question

I have two modules; one which is named external-module and the other dashboard-module. External-module uses dashboard-module's Dashboard Control Component, hence it has to import that module.

Here's my external-module implementaion:

@NgModule({
  imports: [
    CommonModule,
    SharedUiModule,
    RouterModule.forChild([
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'not-found'
      },
      {
        path: 'not-found',
        component: ExternalNotFoundViewComponent
      },
    ]),
    DashboardModule
  ]
})

And, here's my Dashboard module implementation:

@NgModule({
  imports: [
    RouterModule.forChild([{ path: '', pathMatch: 'full', component: DashboardComponent }])
  ],
  declarations: [
    DashboardControlComponent
  ],
  exports: [DashboardControlComponent]
})

That external module is lazy loaded if path is like http://localhost/ext While I'm expecting the Not found component to load, it instead is loading the dashboard component.

If I change the path of dashboard module just to test temporarily, only then it loads correct component ie not-found. I cannot understand why is it ignoring the first empty route otherwise.

Answer 1

The primary problem seems to be the cross-referencing of the Dashboard module. When you import this module, it will also import the router module. This module contains now the empty-path route. It will not be loaded again, thus your expected test fails.

Try to pull the DashboardControlComponent into a separate module, which you can then import in the external module.

However, if you are working with lazy-loaded modules, please be aware that if you are cross-referencing modules, that you will likely create a "commons" chunk as the Dashboard module and the External module are both referencing on the same component. This commons chunk is then loaded upfront. If this is becoming too big, the advantage of lazy loaded modules are gone.

Answer 2

As cross-referencing could be the problem here as suggested by Denis, I ended up applying a guard on dashboard route which would route the user to not-found based on some condition.

Answer 3

The problem here is that the RouterModule in your DashboardModule is also handling the empty path with a pathMatch of 'full' and redirecting to the DashboardComponent. So when the external-module's RouterModule is handling the empty path, it first imports the DashboardModule and that's why the RouterModule in the DashboardModule is also handling the empty path and redirecting to the DashboardComponent.

There are a few ways to solve this issue:

1.You can remove the empty path route in the DashboardModule, since it is not being used by the dashboard module itself.

2. You could change the path of the dashboard route to something specific, such as '/dashboard', to avoid any conflicts with the external-module's route.