Ionic component styles not loading with Angular SSR

[sureshkumarsendrayan]

Description: I'm using Angular 18 standalone application with Ionic 8 and enabled server side rendering. When I try to run SSR, the styles of ionic components are not loading. It just loads the plain html.

Output:

My ionic info:

Ionic:

   Ionic CLI                     : 7.2.0 (C:\Users\ssendrayan\AppData\Roaming\nvm\v20.15.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 8.3.2
   @angular-devkit/build-angular : 18.2.7
   @angular-devkit/schematics    : 18.2.7
   @angular/cli                  : 18.2.7
   @ionic/angular-toolkit        : 12.1.1

Capacitor:

   Capacitor CLI      : 6.1.0
   @capacitor/android : 6.1.2
   @capacitor/core    : 6.1.0
   @capacitor/ios     : 6.1.2

Utility:

   cordova-res : not installed globally
   native-run  : not installed globally

System:

   NodeJS : v20.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 10.7.0
   OS     : Windows 10

[sureshkumarsendrayan]

Providing server.ts code below.

`import 'zone.js/node'; import { APP_BASE_HREF } from '@angular/common'; import { CommonEngine } from '@angular/ssr'; import * as express from 'express'; import { existsSync, readdirSync } from 'node:fs'; import { join } from 'node:path'; import bootstrap from './src/main.server';

export function app(): express.Express { const server = express(); const distFolder = join(process.cwd(), 'dist/app/browser'); const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? join(distFolder, 'index.original.html') : join(distFolder, 'index.html');

const commonEngine = new CommonEngine({
	enablePerformanceProfiler: true
});

// Cerca dinamicamente il file CSS generato con hash
const cssFileName = readdirSync(distFolder).find(
	(file) => file.startsWith('styles') && file.endsWith('.css')
);

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

// Serve i file statici
server.get(
	'*.*',
	express.static(distFolder, {
		maxAge: '1y'
	})
);

// Gestisce tutte le altre richieste utilizzando l'engine Angular
server.get('*', (req, res, next) => {
	const { protocol, originalUrl, baseUrl, headers } = req;

	commonEngine
		.render({
			bootstrap,
			documentFilePath: indexHtml,
			url: `${protocol}://${headers.host}${originalUrl}`,
			publicPath: distFolder,
			inlineCriticalCss: false,
			providers: [
				{ provide: APP_BASE_HREF, useValue: req.baseUrl },
				{ provide: 'REQUEST', useValue: req },
				{ provide: 'RESPONSE', useValue: res }
			]
		})
		.then((html) => {
			// Inietta dinamicamente il CSS nel contenuto HTML generato
			if (cssFileName) {
				html = html.replace(
					'</head>',
					`<link rel="stylesheet" href="${cssFileName}"></head>`
				);
			}
			res.send(html);
		})
		.catch((err) => next(err));
});

return server;

}

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

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

}

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 default bootstrap; `

[sureshkumarsendrayan]

As angular team mentioned here, this issue is not from angular and I expect some reply from Ionic team.

[alfred-arcifa-soprasteria]

As angular team mentioned here, this issue is not from angular and I expect some reply from Ionic team.

Yes, I hope to a soon reply form Ionic. It's an hard issue to solve.