Server side rendering not working with modules lazy loading angular 12 on live server

Question

On the localhost module, lazy loading is working fine, showing meta tags and HTML content in <app-root><app-root/> in the view page source, but it is not showing on the live server. On the live server, I can only see meta tags and HTML contents of components that are direct children of AppModule but lazy loaded modules components are not showing meta tags and HTML. This weird behavior is only on the live server.

app.server.module.ts

 import { NgModule } from '@angular/core';
    import { ServerModule } from '@angular/platform-server';
    import { AppComponent } from './app.component';
    import { AppModule } from './app.module';
    
    @NgModule({
        imports: [AppModule, ServerModule],
        bootstrap: [AppComponent]
    })
    export class AppServerModule { }

main.server.ts

import '@angular/localize/init'
import '@angular/platform-server/init';

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

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule } from '@angular/platform-server';

server.ts

import '@angular/localize/init';
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';
import { createWindow } from 'domino';
import 'localstorage-polyfill'
import 'localstorage-polyfill'
const scripts = readFileSync('dist/clientWeb/browser/index.html').toString();
const window = createWindow(scripts) as any;
(global as any).window = window;
(global as any).document = window.document;
(global as any).Event = window.Event;
(global as any).KeyboardEvent = window.KeyboardEvent;
(global as any).MouseEvent = window.MouseEvent;

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/clientWeb/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();
(global as any).localStorage = localStorage;

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

app.modules.ts

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG, Title } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { AppLayoutComponent } from './shared/layout/app-layout/app-layout.component';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Tradesmanapplayout2Component } from './shared/layout/tradesmanapplayout2/tradesmanapplayout2.component';
import { Supplierapplayout2Component } from './shared/layout/supplierapplayout2/supplierapplayout2.component';
import { Userapplayout2Component } from './shared/layout/userapplayout2/userapplayout2.component';
import { AppDasboardHeader2Component } from './shared/layout/app-dasboard-header2/app-dasboard-header2.component';
import { AppDasboardFooter2Component } from './shared/layout/app-dasboard-footer2/app-dasboard-footer2.component';

const routes: Routes = [

  {
    path: 'resetpassword',
    component: AppHeaderLayoutComponent,
    loadChildren: () => import('./common/resetPassword/resetpassword.module').then(m => m.ResetpasswordModule)
  },
  {
    path: 'Supplier',
    component: Userapplayout2Component,
    loadChildren: () => import('./supplier/supplier.module').then(m => m.SupplierModule),
    
  },
  {
    path: 'User',
    component: Userapplayout2Component,
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
  
  },
  {
    path: 'MarketPlace',
    //component: UsersApplayoutComponent,
    //component: AppHeaderLayoutComponent,
    component: Userapplayout2Component,
    loadChildren: () => import('./marketplace/marketplace.module').then(m => m.MarketplaceModule),
  },
  {
    path: 'User/Agrements',
    //component: AppLayoutComponent,
    component: AppHeaderLayoutComponent,

    loadChildren: () => import('./agrements/agrements.module').then(m => m.AgrementsModule)
  },
  {
    path: 'HWUser',
    //component: AppLayoutComponent,
    component: AppHeaderLayoutComponent,
    loadChildren: () => import('./HelpAndFAQ/helpQuestion.module').then(m => m.HelpQuestionModule)
  },
  {
    path: 'Tradesman',
    component: Userapplayout2Component,
    loadChildren: () => import('./trademan/trademan.module').then(m => m.TrademanModule),
    canActivate: [AuthGuardTradesmanService],
    canActivateChild: [AuthGuardTradesmanService]
  },
  {
    path: 'ContactUs',
    //component: AppLayoutComponent,
    component: AppHeaderLayoutComponent,
    loadChildren: () => import('./contactUs/contactUs.module').then(m => m.ContactUsModule)
  },
  {
    path: 'landing-page/liveleads',
    //component: AppLayoutComponent,
    component: AppHeaderLayoutComponent,
    loadChildren: () => import('./landing-page/liveleads/liveleads.module').then(m => m.LiveleadsModule)
  },
  {
    path: 'landing-page',
    component: AppHeaderLayoutComponent,
    loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule)
  }
]

@NgModule({
  declarations: [
    AppComponent,
    AppLayoutComponent,
    AppDasboardHeaderComponent,
    AppDasboardFooterComponent,
    AppLeftmenuComponent,
    AppcommonfooterComponent,
    SupplierLayoutComponent,
    TrademanLayoutComponent,
    TrademenuLeftComponent,
    SupplierLeftmenuComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    NgbModule,
    RouterModule.forRoot(routes, { enableTracing: false }),
    ModalModule.forRoot(),
    HttpModule,
    BrowserAnimationsModule,
    NgxImageCompressService,
    Events,
    Title,
    metaTagsService,
    ShareService,

  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Deployed Web.config on IIS

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
    <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
      </handlers>
      <aspNetCore processPath="dotnet" arguments=".\HW.Web2.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" />

<rewrite>
   <rules>
        <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
             <match url="iisnode"/>
        </rule>
       
        <rule name="StaticContent">
             <action type="Rewrite" url="{{REQUEST_URI}}"/>
        </rule>
        <rule name="DynamicContent">
             <conditions>
                  <add input="{{REQUEST_FILENAME}}" matchType="IsFile" negate="True"/>
             </conditions>
             <action type="Rewrite" url="main.js"/>
        </rule>
   </rules>
 </rewrite>
 <iisnode devErrorsEnabled="false"
  debuggingEnabled="false"
   loggingEnabled="false" 
   nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />

    </system.webServer>
  </location>
</configuration>

Answer 1

There are several reasons why the body tag of your angular app fails to render on the server side. Here's a checklist:

• First make sure your live environment supports NodeJS. Without NodeJS on the server, you can't use server-side rendering
• In Visual Studio, try changing your ASPNETCORE_ENVIRONMENT environment variable from DEVELOPMENT to PRODUCTION and run your application. In some cases the app behaves differently in either configuration (looks for the main.js file in another location when PRODUCTION). After starting the debugger and trying to prerender a view, you may see some exceptions in the Visual Studio Output window.
  • In my case the main.js file had to end up at ClientApp/dist/main.js. So I had to modify angular.json changing the projects:ClientApp:architect:build:options:outputPath to dist (see also)
• If you experience this problem using Visual Studio, do always look at the Output window for errors which will point you in the right direction.
• If you're hosting a PWA (for example through @angular/pwa), then it's totally normal that you're getting an empty page when going to View source in the browser. If you'd then ctrl + F5, you'll be bypassing the angular service worker which shows you the prerendered html source. This is something you shouldn't bother about. Google, Bing, ... will actually fetch and index the server-side rendered version of your page.
• If you're using ASP.NET Core 3.1 or earlier, you cannot have an async lambda for your SupplyData delegate. SupplyData is not a Func<Task> and is not being awaited in the source code of ASP.NET Core. I changed this in my port to .NET 6

options.SupplyData = async (context, data) => { ... };

• Some live environments block webrequests sent by your angular application during SSR, back to your server. In this case you will get an internal server error (500). You need to solve this by using OnSupplyData.