I created a simple Ionic 5 / Angular 9 Project.
Then used www.scully.io to do static pages prerendering.
It worked well as I can see prerendered html inside generated index.html
The issue is that every ionic web component is a custom web-component and at the stage of browser loading index.html with ion-* tags it does not know what they are and how they should look resulting in:
I tried to resolve this by adding:
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
But the issue is that the above package (ionic.esm.js) is modular that triggers other *.js files packages to be downloaded and evaluated and such js evaluation comes already AFTER the index.html body was parsed and rendered and by the time the ionic.esm.js fully "kicks in" - Angular is ready to take over so prerendering does not look pretty:)
QUESTION:
- is there a way to prevent DOM parsing until a modular js is fully downloaded/evaluated?
- or is there other way to deal with custom web components in this scenario?