vikerman / ivy-universal

Server side rendering using Angular Ivy

Hi there 👋

• 🤖 Learning Godot
• 👯 I’m looking to collaborate on Building Games
• 😄 Pronouns: He/him
• ⚡ Fun fact: 3 continents, 6 cities and counting

ivy-universal's Issues

Support lazy loaded components from external packages

Hi @vikerman @alexeagle, this is a super interesting repo. I'm wondering if you're planning to lazy load from external libraries as well? This is one of the things that currently isn't working well, and it would be great if this is on the radar from the start.

What I'd like to see is the ability to create components that are dynamically added to the screen, without necessarily a relation to the router. This is required when (dynamic) CMS content is rendered in an angular app; The cms components aren't known during build time; the standard components would be given by a library; custom components could override standard once; only relevant bundles are loaded.

missing @angular/platform-browser-dynamic/testing in package.json

ERROR in E:\Angular\ivy\ivy-universal\src\test.ts
[tsl] ERROR in E:\Angular\ivy\ivy-universal\src\test.ts(8,8)
      TS2307: Cannot find module '@angular/platform-browser-dynamic/testing'.

getting this error on build

How do I inject HttpClient in this project?

Is this project still actual

Hi @vikerman,

this project seems to be very promising. Especially the:

Server-side Rendering(SSR) with Angular Ivy
Selective client side rehydration based on user events / data binding changes
At this point no Angular specific code or component code has been loaded. (Current bootstrap size without polyfills: ~12 Kb)

Are there any further plans to work on this, or the approach has been change since the release of Angular 9?

---

After the release of Lighthouse 6 and the change of the factors that drive the score, Angular Universal powered app seems to receive a drawback.

The main problem is the way Largest Contentful Paint is calculated. See the example (the work in progress on a e-commerce site powered by Angular Universal with a focus on max performance and all web standards):

The LCP which becomes the major factor in LH 6 is triggered at the very end although the content does not change after the FCP (since it is pre-rendered on the server, 100% complete HTML which servers SEO purposes).

It seems like re-hydration moves the LCP in time.

Current state of things pretty much a blocker for any Angular Universal PWA.

Minimizing the bundles and allowing re-hydration to pop in on-demand could resolve this.

I have created a Lighthouse issue to possibly get some feedback on this topic: GoogleChrome/lighthouse#10845.