4

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:

enter image description here

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?
Sergey Rudenko
  • 8,809
  • 2
  • 24
  • 51
  • Hi, I'm trying the same thing and I have this issue.. My app is using Ionic 5 and Angular 10. – Davide C Aug 09 '20 at 17:38
  • cool, i will be digging into this more this week, we need away to hydrate ionic components – Sergey Rudenko Aug 10 '20 at 17:49
  • 1
    I tried to bypass the problem adding a loading spinner that hide the content until ionic components are ready but I did not succeed – Davide C Aug 11 '20 at 16:59
  • 1
    Yeah same:) its interesting that while bootstrapping there is that "white screen" gap in the performance view when loading spinner disappears and then Angular still is bootstrapping to show components. I was trying to reduce that gap and see if there is a way to initialize Ionic components earlier. – Sergey Rudenko Aug 11 '20 at 21:29

0 Answers0