@angular/ssr

withAppShell

function

Configures the shell of the application.

API

function withAppShell(  component:    | Type<unknown>    | (() => Promise<Type<unknown> | DefaultExport<Type<unknown>>>),): ServerRenderingFeature<ServerRenderingFeatureKind.AppShell>;

Description

Configures the shell of the application.

The app shell is a minimal, static HTML page that is served immediately, while the full Angular application loads in the background. This improves perceived performance by providing instant feedback to the user.

This function configures the app shell route, which serves the provided component for requests that do not match any defined server routes.

Usage Notes

import { provideServerRendering, withAppShell, withRoutes } from '@angular/ssr';import { AppShellComponent } from './app-shell.component';provideServerRendering(  withRoutes(serverRoutes),  withAppShell(AppShellComponent));

import { provideServerRendering, withAppShell, withRoutes } from '@angular/ssr';provideServerRendering(  withRoutes(serverRoutes),  withAppShell(() =>    import('./app-shell.component').then((m) => m.AppShellComponent)  ));