Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic component styles not loading with Angular SSR #5096

Open
sureshkumarsendrayan opened this issue Oct 10, 2024 · 3 comments
Open

Ionic component styles not loading with Angular SSR #5096

sureshkumarsendrayan opened this issue Oct 10, 2024 · 3 comments
Labels

Comments

@sureshkumarsendrayan
Copy link

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:
image

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
@ionitron-bot ionitron-bot bot added the triage label Oct 10, 2024
@sureshkumarsendrayan
Copy link
Author

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants