Class constructor AppComponent2 cannot be invoked without 'new' Angular 16 SSR

I have an angular app with standalone compoents that i migrate from version 15 to 16 and when i try to run my app via ssr i get error like :

TypeError: Class constructor AppComponent2 cannot be invoked without 'new'

I don't have this AppComponent2 in my app, only AppComponent.

server.ts

import 'zone.js/node';
import 'reflect-metadata';

import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {existsSync} from 'fs';
import {join} from 'path';

const domino = require('domino');

import {LRUCache} from 'lru-cache'

import 'localstorage-polyfill'
import {AppComponent} from "app/app.component";

// Set up LRU cache
const ssrCache = new LRUCache({
max: 50, // Maximum number of items in the cache
ttl: 1000 * 60 * 60 // Cache for 1 hour
});

// 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/my-app/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
const win = domino.createWindow(indexHtml);
global['localStorage'] = localStorage;
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['Event'] = win.Event;
global['Event']['prototype'] = win.Event.prototype;
global['KeyboardEvent'] = win.Event;
global['MouseEvent'] = win.Event;

// const proxy = httpProxy.createProxyServer({changeOrigin: true});
// server.use('/api/', (req, res) => {
// console.log('[node] req.url', req.url);
// // Forward the request to the backend server (replace with your backend URL)
// proxy.web(req, res, {
// target: 'http://localhost:3000/api/',
// changeOrigin: true
// });
// });

const nonSSRRoutes = ['/app/*'];
server.get(nonSSRRoutes, (req, res) => {
console.log(`Not rendering SSR for ${req.originalUrl}`);
res.sendFile(join(distFolder, 'index.html'));
});

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

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
// @ts-ignore
server.get('*', (req, res) => {
const url = req.originalUrl;

// Check if the request is for a cached route
const cachedRoutes = ['/', '/page-not-found'];
if (cachedRoutes.some(route => url === route || url.startsWith(route + '/?'))) {
const cachedPage = ssrCache.get(url);

if (cachedPage) {
console.log('Serving from cache:', url);
return res.send(cachedPage);
} else {
res.render(indexHtml, {req}, (err, html) => {
if (err) {
// @ts-ignore
return req.next(err);
}

ssrCache.set(url, html);
res.send(html);
});
}
} else {
// Non-cached routes
res.render(indexHtml, {req});
}
});

return server;
}


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

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



main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import {appConfig} from "app/app.config";
import {AppComponent} from "app/app.component";

bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));




server.ts

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideServerRendering } from '@angular/platform-server';
import { provideHttpClient } from '@angular/common/http';
import {AppComponent} from "app/app.component";

enableProdMode();

bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
provideServerRendering()
]
}).catch(err => console.error(err));




app.component

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
imports: [
RouterOutlet,
CommonModule,
]
})
export class AppComponent {
title: string = 'my-app';

constructor(
) {
}
}

Continue reading...