angularserver-side-renderingangular-componentsangular-routerangular-ssr

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?


Solution

  • The problem was solved by adding <ng-content /> to the template of a component that was using <ng-template>. This is currently an open issue in Angular - github.com/angular/angular/issues/50543