1 | An app shell lets Universal render a portion of your application via a route at build time.
|
2 | This gives users a meaningful first paint of your application that appears quickly
|
3 | because the browser can simply render the HTML without the need to initialize any JavaScript.
|
4 |
|
5 | Use this command with a routing app that is accompanied by a Universal server-side app.
|
6 |
|
7 | To create an app shell, use the following command.
|
8 |
|
9 | <code-example format="." language="bash">
|
10 | ng generate app-shell my-app
|
11 | </code-example>
|
12 |
|
13 | * `my-app` is the name of your client application
|
14 | * `server-app` is the name of the Universal (server) application
|
15 |
|
16 | The command adds two new architect build targets to your `angular.json` configuration file (along with a few other changes).
|
17 |
|
18 | <code-example format="." language="none" linenums="false">
|
19 | "server": {
|
20 | "builder": "@angular-devkit/build-angular:server",
|
21 | "options": {
|
22 | "outputPath": "dist/my-app-server",
|
23 | "main": "src/main.server.ts",
|
24 | "tsConfig": "src/tsconfig.server.json"
|
25 | }
|
26 | },
|
27 | "app-shell": {
|
28 | "builder": "@angular-devkit/build-angular:app-shell",
|
29 | "options": {
|
30 | "browserTarget": "my-app:build",
|
31 | "serverTarget": "my-app:server",
|
32 | "route": "shell"
|
33 | }
|
34 | }
|
35 | </code-example>
|
36 |
|
37 | To verify the that the app has been built with the default shell content:
|
38 |
|
39 | 1. Run the app-shell target.
|
40 |
|
41 | <code-example format="." language="bash">
|
42 | ng run my-app:app-shell
|
43 | </code-example>
|
44 |
|
45 | 1. Open `dist/app-shell/index.html` in your browser.
|
46 |
|
47 | The default text "app-shell works!" verifies that the app-shell route was rendered as part of the output.
|