Understanding loadChildren and Module Routing in Angular

When using the loadChildren property in a route, it is essential to reference a module that has a routing system implemented. This means only referencing a module that imports RoutingModule and configures it using the forChild(routes) method.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// import { CommonModule } from '@angular/common';
/* ---------------  !System modules  --------------- */

import { SharedModule } from 'sharedModule';   //Includes multiple shared components/directives/pipes
/* ---------------  !App outer modules  --------------- */


import { EncountersComponent } from './encounters.component';
// import { PassCodeComponent } from '../../shared/components/passcode/passcode.component';

export const encountersModuleRoutes: Routes = [
  /* Configure routes for Encounters module here */
];


@NgModule({
  imports: [ SharedModule, RouterModule.forChild(encountersModuleRoutes) ],
  declarations: [ EncountersComponent],
  exports: [ EncountersComponent ],
})


export class EncountersModule {  }

After reviewing the documentation (2.4.2) and examples in the "Angular Modules" and "Routing & Navigation" guides, I have come up with a pattern that may be helpful:

• Ensure that the lazy module has its own routing module.
• In the "lazy-routing.module," define a routes array with a single element. The element should have an empty string for the path property, a defined component property (necessary for handling injections), and a template with a <router-outlet> directive. This route can also have children.
• The path property value of the lazy route in the "app-routing.module" ("lazyModulePrefix" in the example) should be the prefix for all paths in the ".lazy-routing.module".

For instance:

///////////// app-routing.module.ts /////////////////////
import { NgModule  } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found.component';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'lazyModulePrefix', loadChildren: 'app/lazyModulePath/lazy.module#LazyModule' },
  { path: '', redirectTo: 'login', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

.

///////////// lazy-routing.module.ts /////////////////////
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyModuleRootComponent } from './lazy-module-root.component';
import { LazyModuleHomeComponent } from './lazy-module-home.component';
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';

const lazyModuleRoutes: Routes = [
    { path: '',
      component: LazyModuleRootComponent,
      children: [ 
        { path: '', component: LazyModuleHomeComponent },
        { path: 'somePath1', component: AComponentDeclaredInTheLazyModule1 },
        { path: 'somePath2', component: AComponentDeclaredInTheLazyModule2 },
    ] } 
];

@NgModule({
    imports: [RouterModule.forChild(lazyModuleRoutes)],
    exports: [RouterModule]
})
export class LazyRoutingModule { }

.

//////////////////// lazy.module.ts ////////////////////
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedModule } from '../shared/shared.module';
import { LazyRoutingModule } from './lazy-routing.module';
import { LazyModuleRootComponent } from './lazy-module-root.component';
import { LazyModuleHomeComponent } from './lazy-module-home.component';
import { AComponentDeclaredInTheLazyModule1 } from './a-component-declared-in-the-lazy-module-1.component';
import { AComponentDeclaredInTheLazyModule2 } from './a-component-declared-in-the-lazy-module-2.component';

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        LazyRoutingModule,
    ],
    declarations: [
        LazyModuleRootComponent,
        LazyModuleHomeComponent,
        AComponentDeclaredInTheLazyModule1,
        AComponentDeclaredInTheLazyModule2,
    ]
})
export class LazyModule { }

.

//////////////// lazy-module-root.component.ts //////////////////
import { Component } from '@angular/core';

@Component({
    template: '<router-outlet></router-outlet>'
})
export class LazyModueRootComponent { }

With this setup, the routes are mapped as follows:

-> LoginComponent

-> LazyModuleHomeComponent

-> AComponentDeclaredInTheLazyModule1

-> AComponentDeclaredInTheLazyModule2

-> PageNotFoundComponent

In a nutshell: The issue arose when I failed to add child routes to the feature module:

landings.routing.ts

export const LandingsRoutes = RouterModule.forChild(routes);

landings.module.ts

imports: [
    CommonModule,
    // LandingsRoutes // <-- I overlooked this and encountered a Callstack exceeded error
  ]

If you forget to export the routing module as a module, ensure you export only the router with routes. Neglecting details like this can lead to errors.

I encountered a similar issue in my angular app with four modules.

ERROR in Maximum call stack size exceeded

What Went Wrong

Upon investigation, I discovered that I had manually created a routing file within one of my modules but forgot to import it in the module.ts file. It turns out that importing the routing file in the module.ts file is essential to avoid this error.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserLoginComponent } from './user-login/user-login.component';
import { UserSignupComponent } from './user-signup/user-signup.component';
import { PublicComponent } from './public/public.component';
import { PublicRoutingModule } from './public-routing.modue'; //don't forget to import this

@NgModule({
  declarations: [UserLoginComponent, UserSignupComponent, PublicComponent],
  imports: [
    CommonModule,
    PublicRoutingModule //this line was missing in my case
  ]
})
export class PublicModule { }

Reminder: The module file mentioned above is not app.module.ts

Removing comments can make a big difference. I recently updated my router in the app I was developing and decided to comment out a lot of code from the previous router to keep it safe. Surprisingly, after removing the comments, many of the unusual errors disappeared.

The previous responses have been helpful. Make sure to double-check your imports - it's possible you may have forgotten to import a module. Also, verify the version of your typescript package. For instance, when I was working with Angular 5, I encountered a warning in the CLI:

@angular/[email protected] requires typescript@'>=2.4.2 <2.5.0' but 2.5.3 was found instead. Using this version can lead to unpredictable behavior and challenging-to-diagnose issues. To address this, execute the following command to install a compatible version of TypeScript:

npm install typescript@'>=2.4.2 <2.5.0' --save

Failure to rectify this could lead to further errors.

I encountered a similar issue despite having everything set up correctly. I found a solution that worked for me:

1. Stop the angular server
2. Restart the server using ng serve

It miraculously started functioning again after following these steps. Make sure you have all the configurations correct as mentioned in other responses before trying this fix.

How to include a routing component in a module

When working on your EncounterModule.ts file, make sure to include the routing component by adding the following code:

import:[
   AppRoutingModule 
]