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

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

[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',
    }),

[gitalvininfo]

This issue still exist, in my case I have a landing page when first visit, landing page is visible for about 100ms, it is really bad ux for first time visitors of the app.

Already tried solutions like Transferstate but in my case does not meet my expectations to solve the issue. My landing page do not have any XHR request.

I also tried the TransferHttpCacheModule, I notice that first visit, sometimes it loads correctly without the glimpse of landing page, and sometimes it lessens the flicker amount of time for about 20ms but still I can see a glimpse of my landing page, after that it somehow fix my issue, but when I clear my cache, it returns back to previous state which the landing page is visible for about 20ms.

Also tried Preboot as what others is suggesting, but it is not suitable for my app, I have a mat-progress-spinner which acts as loading, when preboot is enabled and I hit F5/refresh my loading icon freezes for a while, it does not animate, which I think is very ugly and after about 1sec it goes back to normal state (app is working as usual like normal angular app).

I’m actually stuck here and I can’t just leave it as it is.