After updating angular version to 12 page is not loading in server

[ghost]

Update angular version to 12 from 8 one by one. After an update in my local everything is working fine, but once I moved to the dev environment, the above issue I'm facing. I tried to disable ivy but no use. Could someone help me to fix this issue, please?

Thanks in advance

package.json

{
"name": "virtualevent",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"dev": "ng serve -c=dev",
"stage": "ng serve -c=stage",
"production": "ng serve -c=production",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc",
"build:browser:serverless": "ng build --prod --base-href /",
"build:serverless": "npm run build:browser:serverless && npm run build:server:serverless",
"server": "node local.js",
"build:prod:deploy": "npm run build:prod && npm run deploy",
"build:serverless:deploy": "npm run build:serverless && npm run deploy",
"deploy": "serverless deploy",
"build:server:serverless": "ng run virtualevent:server:serverless && webpack --config webpack.server.config.js --progress --colors",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node local.js",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"build:client-and-server-bundles": "ng build --prod && ng run virtualevent:server:production --bundleDependencies all",
"serve:prerender": "node static.js",
"build:prerender": "npm run build:prod && node dist/prerender.js",
"build:server:dev": "ng run virtualevent:server:dev && webpack --config webpack.server.config.js --progress --colors",
"build:browser:dev": "ng build --prod --c dev --base-href /",
"build:dev": "cross-env NODE_ENV=dev node set-env.ts && npm run build:browser:dev && npm run build:server:dev",
"build:server:stage": "ng run virtualevent:server:stage && webpack --config webpack.server.config.js --progress --colors",
"build:browser:stage": "ng build --prod --c stage --base-href /",
"build:stage": "cross-env NODE_ENV=stg node set-env.ts && npm run build:browser:stage && npm run build:server:stage",
"build:server:uat": "ng run virtualevent:server:uat && webpack --config webpack.server.config.js --progress --colors",
"build:browser:uat": "ng build --prod --c uat --base-href /",
"build:uat": "cross-env NODE_ENV=uat node set-env.ts && npm run build:browser:uat && npm run build:server:uat",
"build:server:prod": "ng run virtualevent:server:production && webpack --config webpack.server.config.js --progress --colors",
"build:browser:prod": "ng build --prod --c production --base-href /",
"build:prod": "cross-env NODE_ENV=prod node set-env.ts && npm run build:browser:prod && npm run build:server:prod"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.0.0",
"@angular/cdk": "^12.0.0",
"@angular/common": "^12.0.0",
"@angular/compiler": "^12.0.0",
"@angular/core": "^12.0.0",
"@angular/forms": "^12.0.0",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^12.0.0",
"@angular/platform-browser-dynamic": "^12.0.0",
"@angular/platform-server": "^12.0.0",
"@angular/router": "^12.0.0",
"@contentful/rich-text-html-renderer": "^13.4.0",
"@contentful/rich-text-react-renderer": "^13.4.0",
"@ng-bootstrap/ng-bootstrap": "^5.3.1",
"@ng-toolkit/serverless": "^8.0.3",
"@ng-toolkit/universal": "^8.0.3",
"@nguniversal/common": "8.1.0",
"@nguniversal/express-engine": "8.1.1",
"@nguniversal/module-map-ngfactory-loader": "8.1.1",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@ngx-universal/express-engine": "^0.4.0-beta.1",
"@trademe/ng-add-to-calendar": "^3.2.0",
"angularx-social-login": "^3.5.5",
"aws-amplify": "^3.3.3",
"aws-sdk": "^2.601.0",
"aws-serverless-express": "^3.2.0",
"contentful": "^7.13.0",
"core-js": "^3.21.1",
"cors": "~2.8.4",
"cp-cli": "^1.1.0",
"cross-env": "7.0.2",
"domino": "^2.1.4",
"ejs": "^3.0.1",
"express": "^4.15.2",
"fs": "0.0.1-security",
"fs-extra": "9.0.1",
"jquery": "^3.5.1",
"ng-lazyload-image": "^7.1.0",
"ngx-cookie": "^4.1.2",
"ngx-cookie-service": "^10.0.1",
"ngx-device-detector": "^1.4.6",
"ngx-swiper-wrapper": "^9.0.1",
"react": "^16.12.0",
"rxjs": "^7.5.5",
"serverless": "^1.40.0",
"serverless-api-compression": "^1.0.1",
"sha1": "^1.1.1",
"tslib": "^1.10.0",
"webpack-cli": "^3.3.10",
"zone.js": "^0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.16",
"@angular/cli": "^12.0.0",
"@angular/compiler-cli": "^12.0.0",
"@angular/language-service": "^12.0.0",
"@types/jasmine": "^4.0.0",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.5.1",
"@types/node": "^17.0.21",
"codelyzer": "^6.0.2",
"jasmine-core": "^4.0.1",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.3.17",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "^4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"localstorage-polyfill": "^1.0.1",
"opencollective": "^1.0.3",
"protractor": "^7.0.0",
"serverless-apigw-binary": "^0.4.4",
"serverless-offline": "^5.12.1",
"ts-loader": "4.2.0",
"ts-node": "~7.0.0",
"tslint": "^6.1.3",
"typescript": "4.3.4",
"webpack": "^5.70.0",
"webpack-cli": "2.1.2"
},
"browser": {
"crypto": false
}
}

tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"skipLibCheck": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableIvy":false,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
}
}

server.ts

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

import "localstorage-polyfill";

import * as express from "express";
import { join } from "path";
import { REQUEST, RESPONSE } from "@nguniversal/express-engine/tokens";

// Express server
export const app = express();
global["localStorage"] = localStorage;

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), "dist/browser");

// const domino = require('domino');
// const fs = require('fs');
// const path = require('path');
// const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
// const win = domino.createWindow(template);
// global['window'] = win;
// global['document'] = win.document;

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {
AppServerModuleNgFactory,
LAZY_MODULE_MAP,
ngExpressEngine,
provideModuleMap
} = require("./dist/server/main");

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine("html", (, options, callback) => {
if (options.hasOwnProperty("req")) {
let engine = ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [provideModuleMap(LAZY_MODULE_MAP)]
});
engine(, options, callback);
} else {
let engine = require("ejs").renderFile;
engine(_, options, callback);
}
});

app.set("view engine", "html");
app.set("views", DIST_FOLDER);

// Example Express Rest API endpoints
app.get(
".",
express.static(DIST_FOLDER, {
maxAge: "1y"
})
);

// All regular routes use the Universal engine
app.get("*", (req, res) => {
res.render("index", {
req: req,
res: res,

providers: [
  {
    provide: REQUEST,
    useValue: req
  },
  {
    provide: RESPONSE,
    useValue: res
  }
]

});
});

webpack.server.config.ts

// Work around for angular/angular-cli#7200

const path = require('path');
const webpack = require('webpack');

module.exports = {
mode: 'none',
entry: {
// This is our Express server for Dynamic universal
server: './server.ts',
prerender: './prerender.ts'
},
externals: {
//'./dist/server/main': 'require("./server/main")'
},
target: 'node',
resolve: { extensions: ['.mjs','.ts', '.js'] },
optimization: {
minimize: false
},
output: {
libraryTarget: 'commonjs2',
// Puts the output at the root of the dist folder
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
noParse: /polyfills-.*.js/,
rules: [
{ test: /.ts$/, loader: 'ts-loader' },
{
// Mark files inside @angular/core as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
test: /(\|/)@angular(\|/)core(\|/).+.js$/,
parser: { system: true },
},
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?angular(\|/)core(.+)?/,
path.join(__dirname, 'src'), // location of your src
{} // a map of your routes
),
new webpack.ContextReplacementPlugin(
// fixes WARNING Critical dependency: the request of a dependency is an expression
/(.+)?express(\|/)(.+)?/,
path.join(__dirname, 'src'),
{}
)
]
};