Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

App shell

Application shell is a way to render a portion of your application using a route at build time. It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.

This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript.

Learn more in The App Shell Model.

Step 1: Generate an application

Do this with the following Angular CLI command:

      
      ng new my-app
    

For an existing application, you have to manually add the Router and defining a <router-outlet> within your application.

Step 2: Create the application shell

Use the Angular CLI to automatically create the application shell.

      
      ng generate app-shell
    

For more information about this command, see App shell command.

The command updates the application code and adds extra files to the project structure.

      
      src
├── app
   ├── app.config.server.ts               # server application configuration
   └── app-shell                          # app-shell component
       ├── app-shell.component.html
       ├── app-shell.component.scss
       ├── app-shell.component.spec.ts
       └── app-shell.component.ts
└── main.server.ts                         # main server application bootstrapping
    

Step 3: Verify the application is built with the shell content

      
      ng build --configuration=development
    

Or to use the production configuration.

      
      ng build
    

To verify the build output, open dist/my-app/browser/index.html. Look for default text app-shell works! to show that the application shell route was rendered as part of the output.

Last reviewed on Fri Oct 20 2023