5 lines
5.1 KiB
JSON
5 lines
5.1 KiB
JSON
|
{
|
||
|
|
"id": "guide/app-shell",
|
||
|
|
"title": "App shell",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/app-shell.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"app-shell\">App shell<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/app-shell#app-shell\"><i class=\"material-icons\">link</i></a></h1>\n<p>App shell is a way to render a portion of your application via a route at build time.\nIt can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.</p>\n<p>This gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript.</p>\n<p>Learn more in <a href=\"https://developers.google.com/web/fundamentals/architecture/app-shell\">The App Shell Model</a>.</p>\n<h2 id=\"step-1-prepare-the-application\">Step 1: Prepare the application<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/app-shell#step-1-prepare-the-application\"><i class=\"material-icons\">link</i></a></h2>\n<p>You can do this with the following CLI command:\n<code-example language=\"bash\">\nng new my-app --routing\n</code-example></p>\n<p>For an existing application, you have to manually add the <code><a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a></code> and defining a <code><<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></code> within your application.</p>\n<h2 id=\"step-2-create-the-app-shell\">Step 2: Create the app shell<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/app-shell#step-2-create-the-app-shell\"><i class=\"material-icons\">link</i></a></h2>\n<p>Use the CLI to automatically create the app shell.</p>\n<code-example language=\"bash\">\nng generate app-shell\n</code-example>\n<ul>\n<li><code>client-project</code> takes the name of your client application.</li>\n</ul>\n<p>After running this command you will notice that the <code>angular.json</code> configuration file has been updated to add two new targets, with a few other changes.</p>\n<code-example language=\"json\">\n\"server\": {\n \"builder\": \"@angular-devkit/build-angular:server\",\n \"defaultConfiguration\": \"production\",\n \"options\": {\n \"outputPath\": \"dist/my-app/server\",\n \"main\": \"src/main.server.ts\",\n \"tsConfig\": \"tsconfig.server.json\"\n },\n \"configurations\": {\n \"development\": {\n \"outputHashing\": \"none\",\n },\n \"production\": {\n \"outputHashing\": \"media\",\n \"fileReplacements\": [\n {\n \"replace\": \"src/environments/environment.ts\",\n \"with\": \"src/environments/environment.prod.ts\"\n }\n ],\n \"sourceMap\": false,\n \"optimization\": true\n }\n }\n},\n\"app-shell\": {\n \"builder\": \"@angular-devkit/build-angular:app-shell\",\n \"defaultConfiguration\": \"production\",\n \"options\": {\n \"route\": \"shell\"\n },\n \"configurations\": {\n \"development\": {\n \"browserTarget\": \"my-app:build:development\",\n \"serverTarget\": \"my-app:server:development\",\n },\n \"production\": {\n \"browserTarget\": \"my-app:build:production\",\n \"serverTarget\": \"my-app:server:production\"\n }\n }\n}\n</code-example>\n<h2 id=\"step-3-verify-the-app-is-built-with-the-shell-content\">Step 3: Verify the app is built with the shell content<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/app-shell#step-3-verify-the-app-is-built-with-the-shell-content\"><i class=\"material-icons\">link</i></a></h2>\n<p>Use the CLI to build the <code>app-shell
|
||
|
|
}
|