Using Font Awesome 5 in Angular application before bootstrapping (and after bootstrapping)

[wartab]

We have been using Font Awesome 4 up until now and are now in the process to upgrade to version 5 properly.
All icons are working perfectly and this package seems to accomplish everything we have used so far in version 4 while being easy to use.

There is sadly one issue we are unable to solve: we would like to use a spinning circle-notch icon before Angular is done bootstrapping our application.
With Font Awesome 4, we would just add font-awesome's CSS files to .angular-cli.json and add <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> to the HTML file.

This approach doesn't work, not even if importing the icons in main.ts without angular-fontawesome as described here: https://fontawesome.com/how-to-use/use-with-node-js

Is there a recommended way to achieve the same behavior?

[robmadole]

@wartab this is an interesting optimization. One way that you might be able to accomplish this is with server-side rendering. What creates the HTML page that triggers your Angular bootstrapping?

[devoto13]

As a quick solution I would consider inlining SVG icon with any relevant CSS styles in index.html file. Something like this. This is not very clean, but gives an advantage that spinner is displayed instantly without loading bunch of extra library code.

Wonder why https://fontawesome.com/how-to-use/use-with-node-js didn't work for you. Is there any specific problem? It should essentially return SVG icon as a string and than you will need to attach it to DOM. And probably add FA CSS as well.

[wartab]

@robmadole My Angular application is encapsulated in Electron, I do serve the HTML file as produced after a normal build with Angular-CLI. There's no server-side rendering involved.

@devoto13 I guess that this could be a temporary solution that works. Hopefully something better can be found, though.
I'm not exactly sure why it doesn't work, I thought that the main.ts file was executed synchronously. Does Font Awesome modify already existing tags in the HTML or does the JavaScript have to be executed before having the icon tag in the HTML? I'm asking as the bundle files are appended at the end of the body tag by Webpack.

[devoto13]

@wartab I would not rely on icons auto replacement in this case. Rendering icon manually seems to work. See here.

[wartab]

Thank you, that seems to work fine!
Something that surprises me, though, is that you need to actually introduce a setTimeout() delay for it to actually work.

This works: https://pastebin.com/QJKMNBUu
This doesn't: https://pastebin.com/kiFQQQuc

By the way, deep imports need to be done this way for me and work everywhere:
import * as faCircleNotch from "@fortawesome/fontawesome-free-solid/faCircleNotch";

Not sure if that is what you meant in your Stackblitz in the comment after the import.

[devoto13]

Something that surprises me, though, is that you need to actually introduce a setTimeout() delay for it to actually work.

Yes, it is unexpected. Not sure why it happens though.

Not sure if that is what you meant in your Stackblitz in the comment after the import.

Yes, this is exactly what my comment was about.
I tried syntax from pre-release version of FA and that's why it didn't work in StackBlitz.

[devoto13]

@wartab I looked into why it does not work without setTimeout() and it seems that browser will only render DOM updates after the the current macro task is complete. And since application bootstrap is executed in this same macro task it will already replace SVG inserted manually with application's DOM by the time browser is ready to render DOM changes.

In any case above approach is rather a convenient workaround than a proper way to handle this case. The main drawback is that users will still see empty screen while browser loads and parses main.bundle.js code. Which is less of a problem for Electron app, but is important for applications loaded over network.

The proper way to do this would be to inline loading spinner in the index.html initially received by the browser. There are multiple ways to do it:

• manually add SVG and relevant styles to the src/index.html (as I suggested originally)
• use custom script, which will generate SVG and styles and modify dist/index.html after Angular CLI build is completed
• use something like App Shell, which is a more generic solution to the problem (I haven't used it myself though and it seems to require some server side setup)

[wartab]

Yes, I have noticed this issue with a blank page for a short time. For now, we'll stick with the easiest solution, which is roughly your first solution. Thank you very much for your help on this issue.

[mlwilkerson]

There might be a connection between this issue and #18.