v18 - CSS Layers for example with Tailwind CSS fail when appending styles to header and SSR enabled

[EnricoMessall]

Describe the bug

When adding for example the option:

options: {
        cssLayer: {
            name: 'primeng',
            order: 'primeng'
        }
    },

and having Angular SSR enabled the rendering fails and all css will only be load on client side. This happens due to a not supported "this.document.head.prepend" function which is called when using layers through:

this.baseStyle.load(layerOrder, { name: 'layer-order', first: true, ...this.styleOptions });

Environment

MacOS 15.0.1
Chrome 130.0

Using PrimeNG repository with showcase

Reproducer

No response

Angular version

18.0.1

PrimeNG version

18.0.0-beta.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

22.7.0

Browser(s)

Chrome 130

Steps to reproduce the behavior

1. Go to "app-theme.ts" in primeng project
2. Change:

export default {
    preset: Noir,
    options: {
        darkModeSelector: '.p-dark',
    },
};

to

export default {
    preset: Noir,
    options: {
        darkModeSelector: '.p-dark',
        cssLayer: {
            name: 'primeng',
            order: 'primeng'
        }
    },
};

3. Start PrimeNG Showcase
4. Errors will rise, pages will flicker

Expected behavior

CSS is loaded into the header already on service side and no flickering is happen