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

[naveedahmed1]

@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

[naveedahmed1]

@SteveSandersonMS I have gone through the official guide for universal by Angular CLI team and also look at https://github.com/angular/universal-starter.

The only difference I see is in the step 4 https://github.com/angular/angular-cli/wiki/stories-universal-rendering#step-4-setting-up-an-express-server-to-run-our-universal-bundles .

[SteveSandersonMS]

Thanks for reporting this. I tracked it down. Here's the changes you need to make to fix it: dotnet/AspNetCore.Docs@de171ac

[naveedahmed1]

Thank you so much @SteveSandersonMS for the awesome work :)

[gooderic1977]

@naveedahmed1, I'm having trouble with lazy loading the FetchDataModule with SSR

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'counter', loadChildren: './counter/counter.module#CounterModule' },
      { path: 'fetch-data', loadChildren: './fetch-data/fetch-data.module#FetchDataModule'}
    ], { useHash: false, enableTracing: false, initialNavigation: 'enabled' })

It works alright if I navigate to http://localhost:5000/fetch-data by clicking the nav menu. However I got error when I tied to hit http://localhost:5000/fetch-data directly:
Error: Can't resolve all parameters for FetchDataComponent: (?, [object Object]).

Apparently, the arguments from FetchDataComponent constructor was causing the trouble, could you please help?