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 https://github.com/angular/angular-cli/issues/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'), {} ) ] };