bug: Ionic / Angular Universal Prerender bugs on slides

[rgolea]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

The SSR prerender does not render properly. There is a problem when importing slider.js. It seems that the screen object is not defined.
Expected behavior:

It should allow to prerender the html files for the templates that contain ion-select to be prerendered.
Steps to reproduce:

It happens when running npm run prerender directly from the @nguniversal/express-engine schematics and the template has an ion-slides.

Related code:

A sample application via GitHub
https://github.com/rgolea/ionic-ssr-errors

Other information:

This is a continuation of the #21063 since the original issue was fixed.

Ionic info:

Ionic:

   Ionic CLI : 6.6.0

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   NodeJS : v13.12.0
   npm    : 6.14.4
   OS     : macOS Catalina

Errors:

Prerendering 1 route(s) to <path-to-project>/dist/ionic-ssr-errors/browser
TypeError: Cannot read property 'width' of undefined
    at Device (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3026748)
    at hydrateAppClosure (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3028625)
    at hydrateFactory (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3107878)
    at render (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3128770)
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3133854
    at new ZoneAwarePromise (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3206236)
    at hydrateDocument (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3133500)
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:1287139
    at <path-to-project>/dist/ionic-ssr-errors/server/main.js:1:1212014
    at ZoneDelegate.invoke (<path-to-project>/dist/ionic-ssr-errors/server/main.js:1:3194265)
CREATE <path-to-project>/dist/ionic-ssr-errors/browser/index.html (3471 bytes)

The error seems to come from here:
https://github.com/ionic-team/ionic/blob/6a167172ffa4802ff68b5ca0690586438f5ed744/core/src/components/slides/swiper/swiper.bundle.js#L2586
The thing is that it seems to be defined:

[NikolaPeevski]

@liamdebeasi Do you guys have a customised express engine implementation or is the ionic ssr using the universal express engine purely without any changes ? I can't seem to find an example.

[NikolaPeevski]

This is an old project of mine using a few modifications to mock instances such as win and document, which fixes said issues, it's on top of the regular ngexpress. https://gist.github.com/NikolaPeevski/5a016d9edb46ec92ad99803fcf9f4558

[NikolaPeevski]

Additionally there are some issues with inline css bootstrapping if one decides to use a crawler to generate facebook sharable thumbnails for example. I can provide an example that fixes that as well, it's a bit more clusterfunky tho.

[rgolea]

@NikolaPeevski This is not serving it and applying domino. This is prerender the app completely. See the github repo I added.

[NikolaPeevski]

@rgolea You can still mock the browser when pre-rendering, you need a prerender script similar to server.ts

[rgolea]

@NikolaPeevski would you be able to clone the provided git repo and show me a way to do that?

[NikolaPeevski]

@rgolea Check this out, https://github.com/Angular-RU/angular-universal-starter/blob/master/prerender.ts, I can also clone it and show you an example later. When you generate pages if I remember correctly it's the same principle as server side rendering them, as in you still have some javascript chunks that will be rendered in the browser, you can isolate them with the platform service. But in your case mocking it with a custom prerenderer is enough since you only care about the window.

[rgolea]

@NikolaPeevski So, the problem is not how to implement SSR. The problem is Ionic's incompatibility with SSR.
Say for example I implement inside main.server.ts the domino library. I get to read the template, and create the window object and assign it to the global object. I'm still way too far from bug free issues:

const template = readFileSync(
  join(process.cwd(), 'dist', 'ionic-ssr-errors', 'browser', 'index.html')
).toString();
const win = domino.createWindow(template);
// tslint:disable no-string-literal
global['window'] = win;
// tslint:enable no-string-literal

After this I get the document is undefined, self is undefined, navigator is undefined, DocumentFragment is undefined to which my code extends to be the following:

const template = readFileSync(
  join(process.cwd(), 'dist', 'ionic-ssr-errors', 'browser', 'index.html')
).toString();
const win = domino.createWindow(template);
// tslint:disable no-string-literal
global['window'] = win;
global['document'] = win.document;
global['self'] = win;
global['navigator'] = win.navigator;
Object.assign(global, domino['impl']);
// tslint:enable no-string-literal

Afterwards, I still have issues with customElements which has me importing the webcomponents polyfill:

import '@webcomponents/webcomponentsjs';

After a couple of hours of hitting every dead end possible, I still get:

UnhandledPromiseRejectionWarning: ReferenceError: DOMParser is not defined

If you have any new ideas on how to get it to work when I run npm run prerender I am all ears.

[rgolea]

@liamdebeasi @NikolaPeevski
Okay, so... I found the issue. The swiper.js library uses ssr-window as a dependency. This library uses the window object or the one simulated by them. Somewhere along the angular universal module, or maybe ionic server, or somewhere along the builds, before getting to the swiper bundle, there is a window object that gets injected but does not have window.screen. Since the library only checks that the objects exists, it doesn't add properties that need to exist in order to make swiper.js work. That is why I'm adding to the global window all parts that do not exist.

Please check out this PR#4 and, if you can, please encourage the team to merge it so this issue can be solved.