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):

• Using platform server, lazy loaded component flickers as the browser renders the application angular#15716
• support for lazy routes ? universal-starter#175
• First page is loaded twice in universal app angular-cli#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 angular/preboot#75 (comment) 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?

[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.

[amir-Yegane]

I am not sure if it works for you. however, after a long time searching finally I did some changes to my web.config file and it solved for me.
if you want, you can use my code and test it.

you need to just change the route of main.js file if it is not beside your web.config file

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
<rules>
<rule name="myapp">
<match url="/*" />
<action type="Rewrite" url="main.js" />
</rule>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^main.js\/debug[\/]?" />
</rule>

</rules>
    </rewrite>
  </system.webServer>
</configuration>

[alan-agius4]

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases. Please update to the most recent version to resolve the problem.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}