|
| 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 --client-project my-app --universal-project server-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. |
0 commit comments