iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
An Angular app shell is a minimal, route-based UI that Angular can render at build time, so the browser can paint a skeleton of the page (layout, header, navigation) before the full client application has downloaded and started. You generate one with ng generate app-shell. In a server-rendered app, you attach the shell to server routes with withAppShell(component) from @angular/ssr. The shell is a rendering technique. It is separate from prerendering, server rendering, and service-worker caching, and the rest of this article explains where each one fits.
What the app shell pattern does
Angular’s official guide defines the pattern in one sentence: “The App shell pattern is a way to render a portion of your application using a route at build time.” The shell is a static skeleton shared by the pages of an application. Because it is plain HTML that exists before the application JavaScript has initialized, the browser can show meaningful content while the bundle is still loading. The guide presents this as a faster first meaningful paint and better perceived performance. Angular does not publish a measured percentage or time saving for it, so any speed gain depends on your bundle size, network, and how much of the page the shell actually covers. Read the official guide at Angular: App shell pattern.
Create an app shell with the Angular CLI
The CLI workflow is the fastest route for a client-rendered application. The CLI reference describes the generator as configuring the project to generate an app shell during the build (see Angular CLI: generate app-shell).
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors- From the project root, run
ng generate app-shell. The generator configures the project so the shell is produced at build time. - Run a production build with
ng build. The build reference is at Angular v20 CLI: ng build; check the page for your installed major version, because flags can change between releases. - Open the browser
index.htmlin the build output and confirm that the shell markup is present. If it is missing, the shell has not been generated for the route you are testing. - If the application is existing rather than new, make sure it has routing. The guide asks you to add the Router and a
<router-outlet>to the application so that the shell route can render. Without a router outlet, the shell has nowhere to attach to the page.
App shell with server rendering
Server rendering changes who produces the HTML. Angular’s server-side API lets you keep a shell for requests that the server does not match to a defined route. Start with the official overview at Angular: Server-side and hybrid rendering.
#1 Best Overall
Specify the shell component for client-rendered routes
The hybrid-rendering guide says to specify the shell component for client-rendered routes in the server configuration. In the server setup, pass your shell component to withAppShell(component), which is exported from @angular/ssr. The feature applies to requests that do not match a defined server route. Full API details are in Angular API: withAppShell.
Combine the shell with other server features
provideServerRendering is the entry point that combines server rendering with features such as routes and the app shell. Use it when your server configuration needs more than one of these pieces. The reference is Angular API: provideServerRendering.
How the shell differs from prerendering, server rendering, and static output
These terms are often used together, but they answer different questions: when the HTML is produced, whether a server runs at request time, and what the feature is for.
Recommended Free Tools
| Concept | When the HTML is produced | Needs a Node.js server at runtime | What it controls |
|---|---|---|---|
App shell (ng generate app-shell) |
Build time, for the shell route | Not stated in the CLI reference | Early minimal UI shown before client JavaScript initializes |
| Prerendering | Build time | Not stated as a general rule | Route HTML created ahead of time |
| Server rendering | Request time, by the server | Yes | HTML returned for each matched request |
Static output (outputMode: "static") |
Build time | No; the hybrid-rendering guide says no server file is generated | Prerendered route HTML that can be deployed to static hosting |
| Service worker | Not an HTML step; caching runs in the browser | Not applicable | Client-side caching and request handling for later loads and offline behavior |
The shell and the service worker are not interchangeable. The shell decides what the first paint looks like. The service worker decides what can be served from cache afterwards.
Rank #3
Service-worker caching for the shell
A service worker is optional. It improves repeat visits and offline behavior, but it does not define the shell. Angular’s setup and configuration are covered in Angular: Getting started with service workers and Angular: Service-worker configuration.
Add service-worker support
Run ng add @angular/pwa to add service-worker support to the project. The command creates ngsw-config.json, the file that defines caching behavior.
Choose how asset groups are installed
The configuration separates versioned application assets from data requests. For asset groups, the install mode determines when resources are cached.
| Install mode | When resources are cached | Trade-off |
|---|---|---|
prefetch |
All listed assets are downloaded when the service worker installs | Bandwidth intensive, but every listed asset is available offline |
lazy |
Resources are cached on demand, when they are requested | Lower up-front download, but a resource the user has never requested is not cached yet |
Choose a navigation strategy
Navigation requests decide how the shell route is served after it has been cached. The documented freshness option goes to the network first and falls back to cached content when the user is offline. It keeps content more current, but it may add latency and extra requests on every navigation.
Keep the cache consistent across deployments
Angular’s deployment guidance explains that the service worker tracks application versions as sets of resources. This helps keep a running application on a consistent set of files while a new version is deployed. See Angular: Service worker devops.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choosing an approach
- Client-rendered routes, no server required for the shell: use
ng generate app-shelland confirm the shell in the build output’sindex.html. - Server-rendered routes that need a shell for unmatched requests: configure
withAppShell(component)in your server setup, usingprovideServerRenderingwhere the server configuration combines several features. - Static hosting with prerendered route HTML: use static output, which the hybrid-rendering guide describes as not requiring a Node.js server.
- Faster repeat visits or offline use: add the service worker, then choose
prefetchwhen every listed asset must be available offline, orlazywhen bandwidth matters more. Set the navigation strategy based on how fresh the content must be.
Angular’s documentation describes these choices but does not identify a universal performance winner. The right combination depends on which routes are client-rendered, whether a server runs at request time, and how much offline access the application needs.
Offline availability depends on the cache configuration and on which resources the configuration covers. A well-designed shell is still necessary, because caching only delivers what the shell and its assets already contain.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
