-
Notifications
You must be signed in to change notification settings - Fork 12k
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
Comments
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 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. |
Here is the minimal reproducible repo |
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 Closing as this issue is not caused by Angular. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Command
serve
Is this a regression?
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.
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;
});
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
The text was updated successfully, but these errors were encountered: