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?

Answer 1

Have you tried loading it like this:

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

You can find a lot more details here.

Answer 2

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

Answer 3

You can use an arrow function as eminlala said, but it won't work if you run a prod build.

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

So, in order to make it work in a prod build, you need to create an export function as follows.

import SubModule from 'path-to-sub-module';

export function loadSubModule() {
  return SubModule;
}

export const SUB_MODULE_ROUTING = {
  path: 'sub',
  loadChildren: loadSubModule,
};

I use to create a file with this conf and import it to the AppRoutingModule, but you can write it inside AppRoutingModule.

I hope it helps.