FortAwesome / angular-fontawesome

Official Angular component for Font Awesome 5+
https://fontawesome.com
MIT License
1.48k stars 150 forks source link

Standalone + SSR #407

Closed Judp0m closed 5 months ago

Judp0m commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Standalone would be awesome

msacket commented 10 months ago

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 commented 9 months ago

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

natehitze-eventlink commented 8 months ago

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);
  }
}