Angular-CLI-Based-Template: Lazy Loading doesnt work with SSR #291

New Issue

fergalmoran · 2025-08-09T17:15:43Z

fergalmoran commented

2025-08-09 17:15:43 +00:00

Originally created by @naveedahmed1 on 12/5/2017

@SteveSandersonMS with new Angular CLI based template the Lazy Loading doesn't work when we enable SSR. The server log shows below error:

Microsoft.AspNetCore.NodeServices:Error: ERROR { Error: Uncaught (in promise): TypeError: Cannot read property './counter/counter.module#CounterModule' of undefined
TypeError: Cannot read property './counter/counter.module#CounterModule' of undefined
    at ModuleMapNgFactoryLoader.load (D:\MyProject\ClientApp\node_modules\@nguniversal\module-map-ngfactory-loader\src\module-map-ngfactory-loader.js:18:34)

To reproduce this error

Convert the Counter section to Lazy Module

import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { NgModule } from '@angular/core';

import { CounterComponent } from './counter.component';

@NgModule({
    imports: [
        CommonModule,
        
        RouterModule.forChild([
          { path: '', component: CounterComponent }
        ])
    ],
    declarations: [
      CounterComponent
    ]
})
export class CounterModule { }

Update AppModule, remove Counter Component from Declarations array and update route for counter url.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    FetchDataComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', loadChildren: './counter/counter.module#CounterModule' },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I think the template is missing ts-loader

Ref: https://github.com/angular/angular-cli/wiki/stories-universal-rendering#install-dependencies

And webpack.server.config.js

https://github.com/angular/angular-cli/wiki/stories-universal-rendering#webpackserverconfigjs-root-project-level

*Originally created by @naveedahmed1 on 12/5/2017* @SteveSandersonMS with new Angular CLI based template the Lazy Loading doesn't work when we enable SSR. The server log shows below error: ``` Microsoft.AspNetCore.NodeServices:Error: ERROR { Error: Uncaught (in promise): TypeError: Cannot read property './counter/counter.module#CounterModule' of undefined TypeError: Cannot read property './counter/counter.module#CounterModule' of undefined at ModuleMapNgFactoryLoader.load (D:\MyProject\ClientApp\node_modules\@nguniversal\module-map-ngfactory-loader\src\module-map-ngfactory-loader.js:18:34) ``` **To reproduce this error** Convert the Counter section to Lazy Module ``` import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { CounterComponent } from './counter.component'; @NgModule({ imports: [ CommonModule, RouterModule.forChild([ { path: '', component: CounterComponent } ]) ], declarations: [ CounterComponent ] }) export class CounterModule { } ``` Update AppModule, remove Counter Component from Declarations array and update route for counter url. ``` import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { NavMenuComponent } from './nav-menu/nav-menu.component'; import { HomeComponent } from './home/home.component'; import { FetchDataComponent } from './fetch-data/fetch-data.component'; @NgModule({ declarations: [ AppComponent, NavMenuComponent, HomeComponent, FetchDataComponent ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), HttpClientModule, FormsModule, RouterModule.forRoot([ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'counter', loadChildren: './counter/counter.module#CounterModule' }, { path: 'fetch-data', component: FetchDataComponent }, ]) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` I think the template is missing `ts-loader` Ref: https://github.com/angular/angular-cli/wiki/stories-universal-rendering#install-dependencies And `webpack.server.config.js` https://github.com/angular/angular-cli/wiki/stories-universal-rendering#webpackserverconfigjs-root-project-level

fergalmoran closed this issue

2025-08-09 17:15:43 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#291