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 #28616

Closed
1 task
sureshkumarsendrayan opened this issue Oct 11, 2024 · 6 comments
Closed
1 task

Ionic component styles not loading with Angular SSR #28616

sureshkumarsendrayan opened this issue Oct 11, 2024 · 6 comments
Labels
needs: repro steps We cannot reproduce the issue with the information given

Comments

@sureshkumarsendrayan
Copy link

Command

serve

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

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.
Image

Minimal Reproduction

server.ts:
`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;`

Exception or Error

No response

Your Environment

Angular CLI: 18.2.7
Node: 20.15.0
Package Manager: pnpm 9.12.0
OS: win32 x64

Angular: 18.2.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, pwa, router, service-worker, ssr

Package Version

@angular-devkit/architect 0.1802.7 (cli-only)
@angular-devkit/build-angular 18.2.7
@angular-devkit/core 18.2.7 (cli-only)
@angular-devkit/schematics 18.2.7
@schematics/angular 18.2.7 (cli-only)
rxjs 7.8.1
typescript 5.4.5
zone.js 0.14.10


Ionic version:
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

Anything else relevant?

No response

@alan-agius4
Copy link
Collaborator

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

@alan-agius4 alan-agius4 added the needs: repro steps We cannot reproduce the issue with the information given label Oct 11, 2024
@sureshkumarsendrayan
Copy link
Author

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Okay. I'll setup a repo and share it here. In the meantime, one update from my side is the ionic component styles are not loading only when hydration is enabled. If I use ngSkipHydration: 'true' in the component, then it's working. But I need to fix this with hydration enabled.

@sureshkumarsendrayan
Copy link
Author

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

Here is the minimal reproducible repo

@sureshkumarsendrayan
Copy link
Author

Also, getting below mentioned error when I try to use in the application with hydration.

Code:
<ion-header> <ion-toolbar> <ion-title>Header</ion-title> </ion-toolbar> </ion-header>

Error:
Image

@alan-agius4
Copy link
Collaborator

The hydration error is being tracked in this GitHub issue, which discusses styles not appearing because the components use shadow DOM to render their CSS, a feature that isn't supported in server-side rendering (SSR).

There is @ionic/angular-server to make Ionic components compatible with SSR.

Closing as this issue is not caused by Angular.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 11, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests

2 participants