html - My page does not load the styles correctly when accessing one of its links in Angular - Stack Overflow

admin管理员组

文章数量:1389274

I have this html page on angular:

<div class="main-page-container">
  <sidebar-your-chef></sidebar-your-chef>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

When any of the app's routes are loaded, the styles at startup do not load and for a moment the sidebar is seen without the CSS styles applied. Why don't the styles load initially?

I don't have a global CSS template; instead, each component has its own CSS.

I have this html page on angular:

<div class="main-page-container">
  <sidebar-your-chef></sidebar-your-chef>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</div>

When any of the app's routes are loaded, the styles at startup do not load and for a moment the sidebar is seen without the CSS styles applied. Why don't the styles load initially?

I don't have a global CSS template; instead, each component has its own CSS.

• html
• css
• angular
• fouc

Share Improve this question Follow edited Mar 14 at 20:36 Gerard asked Mar 14 at 20:35 GerardGerard 5355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

It could be the following reasons.

1. Network speed is slow, styles taking time to load.

2. The CSS is large in size so it takes time to download.

3. You might face this issue only on the DEV server, unless it happens in prod it is not an issue.

Possible Solutions:

1. Enable brotli or gzip to compress your website files, which will greatly reduce transfer size and improve loading speeds.

---

2. The simple workaround for this, in your app component you can show a loader screen for 1 second to eliminate the flash of no CSS.

    @defer() {}@placeholder(minimum 1s) {
        <app-overlay-spinner/>
    }
   

This is a small snippet to show a spinner for 1 second, I know this is not a direct use case of @placeholder but is a minimal code version to show a spinner for 1 second and then it is gone permanently.

本文标签： htmlMy page does not load the styles correctly when accessing one of its links in AngularStack Overflow