Angular 404 page routing for nested modules

I’m Using nested modules in my project

.
└─ AppModule
    ├─ MallModule
    ├─ OtherModule
    └─ ...

In the main route I only configured top-level routes:

app-routing.module.ts

const routes: Routes = [
  { path: '',   redirectTo: '/', pathMatch: 'full' },
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent },

  { path: '404', component: NotfoundComponent },
  { path: '**', redirectTo: '404' }, // Added
]

Separately, I configured routes separately in each sub-modules, like:

mall-routing.module.ts

const routes: Routes = [
  {
    path: '', 
    component: MallComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      },
      ...
    }
]

The result is, because that no other routes are defined in the main routing configs, all requests other than login/register/404 will be redirected to 404.

Is there anyway I can use a correct 404 redirection but keep the current route file structure? I don’t hope to gather all route configs together.

Thanks!

Answer

import the ‘Other’ modules in your app modules, this will allow the routes defined in those modules to be used.

The updated code should look something like this:

imports: [
  MallModule,
  OtherModule
  RouterModule.forRoot([ // Add the configuration here, which is not a part of other module ])
]