source: trip-planner-front/node_modules/@schematics/angular/app-shell/app-shell-long.md@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 1.5 KB
Line 
1An app shell lets Universal render a portion of your application via a route at build time.
2This gives users a meaningful first paint of your application that appears quickly
3because the browser can simply render the HTML without the need to initialize any JavaScript.
4
5Use this command with a routing app that is accompanied by a Universal server-side app.
6
7To 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
16The 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
37To verify the that the app has been built with the default shell content:
38
391. Run the app-shell target.
40
41 <code-example format="." language="bash">
42 ng run my-app:app-shell
43 </code-example>
44
451. Open `dist/app-shell/index.html` in your browser.
46
47The default text "app-shell works!" verifies that the app-shell route was rendered as part of the output.
Note: See TracBrowser for help on using the repository browser.