InlineCritical CSS optimization not working in Angular Universal App using Bootstrap styles

[jcrespoven]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

No

Description

InlineCritical optimization is not working as expected in Angular Universal applications that are using Bootstrap styles. A blink of unstyled html is shown. It seems that bootstrap styles are not inlined as critical and are being lazy loaded.

🔬 Minimal Reproduction

I have created a reproduction app where you can check the issue: test-app
It's a new application, with Angular Universal and Bootstrap dependencies added, and InlineCritical optimization enabled. I moved the AppComponent styles to the corresponding SCSS file and also added a red square div that should appear centered at the top of the screen.

If the application is served in SSR mode, you should see how the red square blinks when refreshing the page (it has no bootstrap styles until styles.xxxxxxxxx.css is loaded).

npm run build:ssr
npm run serve:ssr
http://localhost:4500

🔥 Exception or Error

No errors are shown

🌍 Your Environment

Angular CLI: 11.2.1
Node: 14.16.0
OS: win32 x64

Angular: 11.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.1
@angular-devkit/build-angular   0.1102.1
@angular-devkit/core            11.2.1
@angular-devkit/schematics      11.2.1
@angular/cli                    11.2.1
@nguniversal/builders           11.2.0
@nguniversal/express-engine     11.2.0
@schematics/angular             11.2.1
@schematics/update              0.1102.1
rxjs                            6.6.3
typescript                      4.1.5

[alan-agius4]

A potentiation problem that I spotted is that it appears that you are only enabling critical css inling on your browser build. To enable critical css inlining during server side rendering you can change the engine initialization to

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
+   inlineCriticalCss: true,
  }));

If the above doesn't solve the issue, I'll look more into this in the coming days.

[jcrespoven]

Thank you Alan, I was not aware of that property in the server initialization. I added it to the test app and there is no more style blinking, but when I tested it in my real project, I realized that another problem has arised with local fonts (another blinking issue).

I updated the test app, adding a custom WOFF2 font file and preloading it in the index file. I also added a title in appComponent.html that uses this font-family. Without inlineCritical optimization, you should see no blinking, but with the optimization enabled (both in browser and server) the font is not preloaded.

Is there any solution to this kind of behavior?

[alan-agius4]

@jcrespoven, thanks for getting back. With regards to the fonts I think I might now what it is happening. Likely this is something that we’ll need to fix.

Let me get back to you on this in the coming days.

Thanks.

[alan-agius4]

I have a fix for the mentioned issue #2004.

However, for this to work, you do need to defined at least one critical css rule that uses the font ie font-family: 'conthrax-sb', sans-serif; in style.css, otherwise the font definition will not be inlined.

[jcrespoven]

Thank you Alan, that was fast!

Is going to be absolutely neccessary to define a css rule that uses the font in styles.scss, or is this a temporary fix?