Standalone + SSR

[Judp0m]

What is the support for Standalone (no modules) and Server Side Rendering?

Without the Standalone mode, icons show up properly in the server-generated version of my app. With standalone, the icons are blank for the SSR page, and then get populated once the client takes over. So it flashes after a couple seconds of loading (load SSR page, no icons, load the app, bootstraps the app, then the icons show up). This causes layout shifts and is obviously undesirable.

If it is supported, could we get a guide or clarity? If not supported, consider that a feature request.

[devoto13]

What is the support for Standalone (no modules) and Server Side Rendering?

Have never tested it, so not sure. Let's consider it a feature request to write a guide/test and fix it if needed.

[DominicWrege]

Standalone would be awesome

[msacket]

A similar problem for me is that the icons are initially displaying too large with the SSR. A flash later, once the website hydrates client-side and the font-awesome CSS is injected, they shrink to the correct size. For my particular use case, copying the relevant css to the main scss works around this issue:

svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
    overflow: visible;
    box-sizing: content-box;
}
.svg-inline--fa {
    display: var(--fa-display, inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}

[kewur]

@msacket 's workaround used to work for me in the module based ssr, but doesn't work with standalone

[natehitze-eventlink]

I got a different workaround from https://www.skovy.dev/blog/server-side-rendering-font-awesome

We don't use standalone but I think the only difference is how you inject the document: https://stackoverflow.com/a/76719683

import { Inject } from '@angular/core';
import { CommonModule, DOCUMENT } from "@angular/common";
import { config, dom } from "@fortawesome/fontawesome-svg-core";

...

export class AppModule {
  constructor(@Inject(DOCUMENT) private document: Document) {
    // This code was heavily inspired by https://www.skovy.dev/blog/server-side-rendering-font-awesome
    // FontAwesome icons loaded the way we do start HUGE initially until the CSS is injected. This injects the CSS immediately.
    config.autoAddCss = false; // Disable FA's CSS injection
    let head = this.document.getElementsByTagName("head")[0];
    let styleNode = this.document.createElement("style");
    styleNode.innerHTML = dom.css(); // grab FA's CSS
    head.appendChild(styleNode);
  }
}