嵌套模块的 Angular 404 页面路由

Question

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 1

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 ])
]

Answer 2

in routing load your modules like below

  // MallModule
  {
    path: "path",
    canLoad: [AuthGuard],
    loadChildren: "./modules/MallModule.module#MallModule",

  },

Answer 3

I arrived in at this question after one module worked fine with the routing but another gave 404 for all its subpages.

The problem for me was the order in app.modules.ts . I had the submodules after the import of AppRoutingModule in the list of imports. Once I moved that last, than the routing of submodules and 404 page worked fine.

In app.module.ts.

  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    SubModule,
    AuthorizationModule,
    CommonModule,
    FontAwesomeModule,
    ProfileModule, // this was previously defined after AppRoutinModule
    AppRoutingModule // this must be last in list for routing with 404 to work
  ]

and in app-routing.modules.ts.

const routes: Routes = [
    // https://angular.io/guide/router
    { path: 'help', component: HelpComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'contact', component: ContactComponent},
    { path: '404', component: PageNotFoundComponent},
    { path: '**', component: PageNotFoundComponent}
];