|
| 1 | +<!-- Links in /docs/documentation should NOT have \`.md\` at the end, because they end up in our wiki at release. --> |
| 2 | + |
| 3 | +# App shell |
| 4 | + |
| 5 | +App shell is a way to render a portion of your application via a route at build time. This gives users a meaningful first paint of your application because the browser does not need to initialize any JavaScript, just rendering the HTML. |
| 6 | + |
| 7 | +## Steps |
| 8 | + |
| 9 | +### Step 1: Prepare the application |
| 10 | + |
| 11 | +An application must be set up with routing. This can be accomplished by running: |
| 12 | +``` |
| 13 | +ng new my-app --routing |
| 14 | +``` |
| 15 | +Or if you have an existing application you can manually add routing by including the RouterModule and defining a `<router-outlet>` within your app. |
| 16 | + |
| 17 | + |
| 18 | +### Step 2: Create the app shell |
| 19 | +``` |
| 20 | +ng generate app-shell --client-project my-app --universal-project server-app |
| 21 | +``` |
| 22 | +`my-app` is the name of your client application |
| 23 | +`server-app` is the name of the universal (or server) application |
| 24 | + |
| 25 | +After running this command you will notice that the `angular.json` configuration file has been updated. Two new targets were added (and a few other changes): |
| 26 | +``` |
| 27 | +"server": { |
| 28 | + "builder": "@angular-devkit/build-angular:server", |
| 29 | + "options": { |
| 30 | + "outputPath": "dist/my-app-server", |
| 31 | + "main": "src/main.server.ts", |
| 32 | + "tsConfig": "src/tsconfig.server.json" |
| 33 | + } |
| 34 | +}, |
| 35 | +"app-shell": { |
| 36 | + "builder": "@angular-devkit/build-angular:app-shell", |
| 37 | + "options": { |
| 38 | + "browserTarget": "my-app:build", |
| 39 | + "serverTarget": "my-app:server", |
| 40 | + "route": "shell" |
| 41 | + } |
| 42 | +} |
| 43 | +``` |
| 44 | + |
| 45 | +### Step 3: Verify the app is built with the shell content |
| 46 | + |
| 47 | +build with the app shell target |
| 48 | +``` |
| 49 | +ng run my-app:app-shell |
| 50 | +``` |
| 51 | + |
| 52 | +Verify the build output |
| 53 | +Open dist/app-shell/index.html |
| 54 | +look for text "app-shell works!" which verifies that the app shell route was rendered as part of the output |
0 commit comments