The App shell pattern 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.
-
Prepare the application
Do this with the following Angular CLI command:
ng new my-app --routingFor an existing application, you have to manually add the
Router
and defining a<router-outlet>
within your application. -
Create the application shell
Use the Angular CLI to automatically create the application shell.
ng generate app-shellFor 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
ng run my-app:app-shell:developmentOr to use the production configuration.
ng run my-app:app-shell:productionTo verify the build output, open
dist/my-app/browser/index.html
. Look for default textapp-shell works!
to show that the application shell route was rendered as part of the output.