Routing to sub routing module without lazy loading

Have you tried loading it like this:

{ path: 'sub', loadChildren: () => SubModule }

You can find a lot more details here.

You forgot to declare child route to new

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

if you want to keep the second routing module then

sub-routing.module.ts

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

sub.module.ts

@NgModule({  ...  imports: [   ...   SubRoutingModule,

app.module.ts

@NgModule({  imports: [    ...,    AppRoutingModule,    SubModule

Plunker Example

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 },];