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?
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