An app shell lets Universal render a portion of your application via a route at build time. This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML without the need to initialize any Java\+Script.

Use this command with a routing app that is accompanied by a Universal server-\/side app.

To create an app shell, use the following command.

$<$code-\/example format=\char`\"{}.\char`\"{} language=\char`\"{}bash\char`\"{}$>$ ng generate app-\/shell my-\/app $<$/code-\/example$>$


\begin{DoxyItemize}
\item {\ttfamily my-\/app} is the name of your client application
\item {\ttfamily server-\/app} is the name of the Universal (server) application
\end{DoxyItemize}

The command adds two new architect build targets to your {\ttfamily angular.\+json} configuration file (along with a few other changes).

$<$code-\/example format=\char`\"{}.\char`\"{} language=\char`\"{}none\char`\"{} linenums=\char`\"{}false\char`\"{}$>$ \char`\"{}server\char`\"{}\+: \{ \char`\"{}builder\char`\"{}\+: \char`\"{}@angular-\/devkit/build-\/angular\+:server\char`\"{}, \char`\"{}options\char`\"{}\+: \{ \char`\"{}output\+Path\char`\"{}\+: \char`\"{}dist/my-\/app-\/server\char`\"{}, \char`\"{}main\char`\"{}\+: \char`\"{}src/main.\+server.\+ts\char`\"{}, \char`\"{}ts\+Config\char`\"{}\+: \char`\"{}src/tsconfig.\+server.\+json\char`\"{} \} \}, \char`\"{}app-\/shell\char`\"{}\+: \{ \char`\"{}builder\char`\"{}\+: \char`\"{}@angular-\/devkit/build-\/angular\+:app-\/shell\char`\"{}, \char`\"{}options\char`\"{}\+: \{ \char`\"{}browser\+Target\char`\"{}\+: \char`\"{}my-\/app\+:build\char`\"{}, \char`\"{}server\+Target\char`\"{}\+: \char`\"{}my-\/app\+:server\char`\"{}, \char`\"{}route\char`\"{}\+: \char`\"{}shell\char`\"{} \} \} $<$/code-\/example$>$

To verify the that the app has been built with the default shell content\+:


\begin{DoxyEnumerate}
\item Run the app-\/shell target.

$<$code-\/example format=\char`\"{}.\char`\"{} language=\char`\"{}bash\char`\"{}$>$ ng run my-\/app\+:app-\/shell $<$/code-\/example$>$
\end{DoxyEnumerate}
\begin{DoxyEnumerate}
\item Open {\ttfamily dist/app-\/shell/index.\+html} in your browser.
\end{DoxyEnumerate}

The default text \char`\"{}app-\/shell works!\char`\"{} verifies that the app-\/shell route was rendered as part of the output. 