Ionic component styles not loading with Angular SSR #5096

Activity

1. ionitron-bot

   added

   triage

   on Oct 10, 2024
2. sureshkumarsendrayan commented on Oct 10, 2024

   

   sureshkumarsendrayan

   on Oct 10, 2024

   Author

   More actions

   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;
   `
3. sureshkumarsendrayan commented on Oct 14, 2024

   

   sureshkumarsendrayan

   on Oct 14, 2024

   Author

   More actions

   As angular team mentioned here, this issue is not from angular and I expect some reply from Ionic team.
4. alfred-arcifa-soprasteria commented on Oct 17, 2024

   

   alfred-arcifa-soprasteria

   on Oct 17, 2024

   More actions

   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.