Universal: Reflow/re-rendering happening on browser when loading lazy loaded routes

[rohit-nair]

Bug Report

What is the expected behavior?

On apps with server side rendering and lazily loaded modules, when landing on pages with lazy loaded components, ie. requesting pages with lazy loaded components such as http://localhost:4000/lazy in the universal-starter demo app, the existing renderings are hydrated from state transfer and are not rendered again client side.

What is the current behavior?

• All the style elements from SSR, style[ng-transition], are removed.
• The page is effectively being re-rendered client side causing the page/component to flicker.
• The flicker duration is dependent on the bundle size of lazy loaded module. For heavier modules, it takes a bit for the bundle to be downloaded and parsed causing extended period of white screen.

The above behavior can be see here. On the right in dev tools is the html markup that is rendered and send from SSR. On the left is the page after all the styles are removed in appInitializerFactory.

Debugger with breakpoint at the place where the styles are removed.

Meanwhile a request is made to fetch the lazy loaded bundle.

AppComponent is initialized and the components are re-rendered.

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [ ] express-engine
- [ ] hapi-engine
- [x] module-map-ngfactory-loader

Minimal reproduction with instructions:

Run following steps to get universal-starter demo project up and running.

• git clone https://github.com/angular/universal-starter.git
• npm install
• npm run build:ssr && npm run serve:ssr

Now navigate to http://localhost:4000/lazy.
Open debugger and put a breakpoint in platform-browser.jss appInitializerFactory method where styles are being removed.
Reload the page.

What is the use-case or motivation for changing an existing behavior?

• Affects user experience.
• Doesn't leverage the benefits of SSR.

Environment:

@nguniversal versions

• aspnetcore-engine:
• common: 7.1.4
• express-engine: ^6.0.0
• hapi-engine:
• module-map-ngfactory-loader: ^6.0.0

Angular CLI: 7.1.4
Node: 10.15.3
OS: darwin x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Is there anything else we should know?

Occurs even with initialNavigation: 'enabled'

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
      { path: 'lazy/nested', loadChildren: './lazy/lazy.module#LazyModule'}
    ], {
      initialNavigation: 'enabled',
    }),

Possible regression as there exists following closed bug reports (to list a few):

• https://github.com/angular/angular/issues/15716
• https://github.com/angular/universal-starter/issues/175
• https://github.com/angular/angular-cli/issues/7477

[ahmed-beheiry]

@rohit-nair
Hello, did you find any solution to this issue??
I also have the same issue and can't figure it out..

[sharkoman]

I am suffering from the same problem...

[FrancescoPassanti]

I have the same problem in various projects.

[FrancescoPassanti]

You can view the bug visiting this website that i built using Angular 7 and Angular Universal.
https://huna.io/

[dericatienza]

Hi. We have the same problem as well. The first paint doesn't have the styles and then, after a split-second, reloads with the styles properly rendered. We already tried with the initialNavigation: 'enabled' but still the issue persists.

[rohit-nair]

I was guided to use https://github.com/angular/preboot with following hack https://github.com/angular/preboot/issues/75#issuecomment-421266570 which solved my issue although in a hacky way.

Hope this helps.

[vikerman]

The first thing that needs to be done is set initialNavigation: 'enabled' in the RouterModule config. Please report back if you see flicker even after adding that.

[benjamin-albert]

@vikerman The issue's descriptions says:

Is there anything else we should know?

Occurs even with initialNavigation: 'enabled'

RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'},
      { path: 'lazy/nested', loadChildren: './lazy/lazy.module#LazyModule'}
    ], {
      initialNavigation: 'enabled',
    }),

[BruneXX]

Hi Guys, any update on this? thanks!

[tskweres]

Still have this flicker

[Bizotics-Dev]

any update on this?

[Alex-hv]

Hi @vikerman
the thing is i need to use initialNavigation: 'disabled', to generate available routes based on server's response
in App Initializer i have code that "router.resetConfig()" with new routes, that i received from server
and in case initialNavigation: 'disabled' it's flickering
is it possible to manage this?

[CapLonelyFlaw]

I try this tutorial project to check for flickering problem. And it exists there. Just go to network tab, Disable cache and use Slow 3G network, navigate to /contact and this problem will occurs.

[Denis-Evseev]

any updates? The issue hurts a lot...
My competitors, who build projects in PHP outperform me in SEO
Common Google!

[AsifDeveloper]

This issue still exists. I added initialNavigation: 'enabled', but no use. If I reload / refresh the application, it renders twice. Any update on this?