withAppShell
Configures the shell of the application.
API
function withAppShell( component: Type<unknown> | (() => Promise<any>)): ServerRenderingFeature<ServerRenderingFeatureKind.AppShell>;
withAppShell
ServerRenderingFeature<ServerRenderingFeatureKind.AppShell>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.
Type<unknown> | (() => Promise<any>)- The Angular component to render for the app shell. Can be a direct component type or a dynamic import function.
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) ));