Routing to sub routing module without lazy loading

Question

I want to have multiple routing modules in order to keep my application clean and easy to read. I currently use lazy loading for the SubComponent but I don't want to do this. So I am looking for a way to change this. Anyways, here is the currently working code.

I have the following two routing files.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sub', loadChildren: './sub/sub.module#SubModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

sub-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: SubComponent, children: [
    { path: 'new', component: SubEditComponent }
  ] },
];

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

It works fine this way but I don't want to apply lazy loading to this SubComponent. So, ideally I want to change the app-routing.module.ts to this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sub', component: SubComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

This will not work and result in the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'sub/new'
Error: Cannot match any routes. URL Segment: 'sub/new'

The SubComponent will grow substantially in size and I don't want to apply lazy loading for my own reasons. So in any event, is there a way to use multiple routing files while avoiding lazy loading?

user_2481153 · Answer

app.module.ts

 @NgModule({
    
      imports: [
        ...,
       SubModule,   /* subModule with routing, the order is very important */ 
       AppRoutingModule,  // put it at the end
      ]
}

the order of routing Modules is very important.

AppRoutingModule.ts

const routes: Routes = [
  // filter path '**' will prevent routing to the subModule
  { path: '**', component: PageNotFoundComponent },
];

Routing to sub routing module without lazy loading

4 Answers