Why are components' imports not loading in Angular 19 SSR?

I've run into a problem that my header's imports are not loaded properly in SSR.

In my Angular 19 application the app.component.html includes a static <app-header> component that should exist on all pages and a <router-outlet> container for the Angular router:

app.component.html:

<app-header></app-header>
<main class="w-full flex justify-content-center items-center">
<router-outlet />
</main>


header.component.ts:

import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';

@Component({
selector: 'app-header',
imports: [
ButtonModule,
],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {

}


app.config.ts:

export const appConfig: ApplicationConfig = {
providers:
[
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(withEventReplay()),
provideHttpClient(withFetch()),
provideAnimationsAsync(),
providePrimeNG({
theme: {
preset: Aura,
options: {
darkModeSelector: '.app-dark'
}
}
}),
// other services
],
};


app.config.server.ts:

const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
provideServerRoutesConfig(serverRoutes),
],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);


For some reason the imports of <app-header> (ButtonModule in this case) are not included when rendered in SSR and therefore are not displayed appropriately on the website. So unless ButtonModule is imported in a router component (component of a specific page), ButtonModule will not be loaded for the header. All imports of router components are being loaded successfully.

What seems to be the problem?

Continue reading...