Note: for support questions, please use the Universal Slack Channcel or https://gitter.im/angular/universal

• I'm submitting a ...

• bug report
• feature request

• Which parts of preboot are affected by this issue?

• server side
• client side
• inline
• build process
• docs
• tests

• Do you want to request a feature or report a bug?

A bug.

• What is the current behavior?

Server-side styles are in some scenarios removed by Angular before Preboot switches the app to the client-side one, causing a potentially huge flash of unstyled content.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

1. Clone https://github.com/mgol/angular-server-bug and follow README instructions to run the app.
2. Load the page & observe it (it may take ~15 seconds).

• What is the expected behavior?

There should be no visible app swap. Styles shouldn't disappear before the app is switched to the client side one.

• What is the motivation / use case for changing the behavior?

Current behavior looks really broken to the end user.

• Please tell us about your environment:

• Browser: Chrome 64
• Language: TypeScript 2.6.2
• OS: macOS
• Platform: Node.js

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

This issue happens if a component is hidden behind *ngIf and the condition is set to a truthy one only after some time - in particular, when waiting for a specific HTTP request to finish. Angular thinks the client side app is ready as it bootstrapped correctly and it just waits for the HTTP request to finish to swap the flag. However, Preboot still waits for the app to get stable so it shows the server-side generated one. Unfortunately, its inline styles are already removed and the new ones are not loaded yet as Angular haven't created the component yet client side.