bug: ion-content fullscreen is not compatible with pre-rendering

[WDrzewiecki]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

SSR not working after upgrading to angular 16, even in ionic starter app. After starting dev server and opening the app, the page loads until the server throws out of memory. With a production build server throws "NotYetImplemented" error and returns only original index.html file without rendered page.

Expected Behavior

SSR should work with angular 16.

Steps to Reproduce

1. Start SSR dev server (npm run dev:ssr)
2. Visit app located on localhost:4200
3. Loading continues until the server throws out of memory OR
4. Build app
5. Run npm run serve:ssr
6. Visit app with disabled javascript

Code Reproduction URL

https://github.com/WDrzewiecki/ionic-ssr

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.0.5 @angular-devkit/build-angular : 16.0.0 @angular-devkit/schematics : 16.0.0 @angular/cli : 16.0.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.0.1 @capacitor/android : not installed @capacitor/core : 5.0.1 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

NodeJS : v18.16.0 (/usr/local/bin/node) npm : 9.5.1 OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce the reported out of memory error, but I don't see anything that would indicate this is an Ionic bug. Have you tried filing an issue with the Angular team?

[WDrzewiecki]

Thanks for your reply. I haven't reported the issue to the Angular team yet. But after removing the IonicServerModule from the imports in app.server.module the page starts to render (obviously the ionic components have some visual issues, but all other added components render fine). Also Angular starter app works well with ssr.

[liamdebeasi]

Are you able to identify which part of IonicServerModule is causing the issue? It's possible that the module is triggering a bug in Angular. It's also possible that there is an incompatibility with Angular 16, but there's not enough information here to determine that.

If you have a stack trace with the source coming from Ionic-related code, that would be helpful.

[WDrzewiecki]

Unfortunately, the only logs I have currently come from the prod build, so they are not very readable, but I also attach the main.ts file related to reported logs (https://github.com/WDrzewiecki/ionic-ssr/blob/main/main.js)

And these are my log:

Error: NotYetImplemented
    at exports2.nyi (/Users/user/myApp/dist/app/server/main.js:133678:25)
    at hydrateApp (/Users/user/myApp/dist/app/server/main.js:19461:25)
    at hydrateAppClosure (/Users/user/myApp/dist/app/server/main.js:49424:15)
    at hydrateFactory (/Users/user/myApp/dist/app/server/main.js:49473:13)
    at render (/Users/user/myApp/dist/app/server/main.js:49869:16)
    at /Users/user/myApp/dist/app/server/main.js:49753:21
    at new Promise (<anonymous>)
    at hydrateDocument (/Users/user/myApp/dist/app/server/main.js:49733:13)
    at /Users/user/myApp/dist/app/server/main.js:161244:39
    at /Users/user/myApp/dist/app/server/main.js:150845:42

As you can see line 161244 is part of hydrateIonicComponents function so maybe this can help somehow. I can try to get more logs soon if needed.

[liamdebeasi]

Is there a way I can reproduce this in a development build?

[WDrzewiecki]

Just change in angular.json file in serve-ssr from "browserTarget": "app:build:development", to "browserTarget": "app:build", and from "serverTarget": "app:server:development" to "serverTarget": "app:server" and after running npm run dev:ssr you should have this logs. It may not be the most elegant way, but it should work temporarily

[WDrzewiecki]

And some more logs from debugger:

[sean-perkins]

Hello @WDrzewiecki can you try with this dev-build and let me know if you experience any issues?

npm install @ionic/angular@7.0.6-dev.11683653232.1ddc5840 @ionic/angular-server@7.0.6-dev.11683653232.1ddc5840

The problematic UI was <ion-content [fullscreen]="true">. Our fullscreen implementation reads the element dimensions and force updates the element. This causes an issue in a SSR environment. The dev-build includes a change that only does this behavior in a browser environment.

Related Stencil bugs that should be closed with this:

• https://github.com/ionic-team/stencil/issues/2429
• https://github.com/ionic-team/stencil/issues/4076

[WDrzewiecki]

Everything seems to be working fine now, thank you so much for your assistance

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.