Angular 11 Universal do not show dynamic data in Page Source

Question

My Angular 11 SSR is not showing dynamic data in page source. I have done all searching and implemented whatever I have found on the web. Can someone please help with this?

I have wrapped all client-side code inside isplatformbrowser. I also do not see any error logs in the console when I run ng run serve:ssr. I also added a resolver for some routes still there is no luck.

server.ts file

 import "zone.js/dist/zone-node";

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 } from "fs";

import { NgxRequest, NgxResponse } from "@gorniv/ngx-universal";
import "localstorage-polyfill"
// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), "dist/project/browser");
  const indexHtml = existsSync(join(distFolder, "index.original.html")) ? "index.original.html" : "index";
  global["localStorage"] = localStorage;

  // 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);

  // Serve static files from /browser
  server.get("*.*", express.static(distFolder, {
    maxAge: "1y"
  }));

  // Do not serve the following routes via Universal
  server.get("/", (req, res) => {
    res.sendFile(join(distFolder, "index.html"));
  });

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

  return server;
}

function run() {
  const port = process.env.PORT || 5000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// 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";