From 0895bcef8b8dbdea61482b1c9de432e0fdc921b6 Mon Sep 17 00:00:00 2001
From: Zhicheng WANG <zcwang@thoughtworks.com>
Date: Wed, 5 Jun 2019 14:07:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BF=BB=E8=AF=91=20app-shell?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aio/content/guide/app-shell.md | 50 ++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/aio/content/guide/app-shell.md b/aio/content/guide/app-shell.md
index 8feaa3d8f4..2e0647125d 100644
--- a/aio/content/guide/app-shell.md
+++ b/aio/content/guide/app-shell.md
@@ -1,34 +1,72 @@
 # App shell
 
+# 应用外壳
+
+
 App shell is a way to render a portion of your application via a route at build time.
 It 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.
 
+应用外壳是一种在构建期间借助路由渲染部分应用的方法。它可以通过快速启动一个静态渲染页面（所有页面的公共骨架）来改善用户体验。与此同时，浏览器会下载完整的客户端版本，并在代码加载后自动切换到完整版。
+
+
 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.
 
+这能让用户快速看到应用中第一个有意义的画面，因为浏览器可以很简单地渲染出 HTML 和 CSS，而无需初始化任何 JavaScript。
+
+
 Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell).
 
+欲知详情，参见[应用外壳模型](https://developers.google.com/web/fundamentals/architecture/app-shell)。
+
+
 ## Step 1: Prepare the application
 
+## 第 1 步：准备本应用
+
+
 You can do this with the following CLI command:
+
+可以用下列 CLI 命令来执行本操作：
+
 <code-example format="." language="bash" linenums="false">
 ng new my-app --routing
 </code-example>
 
+
+
 For an existing application, you have to manually add the `RouterModule` and defining a `<router-outlet>` within your application.
 
+对于既有应用，你必须手动添加 `RouterModule` 并在应用中定义 `<router-outlet>` 。
+
+
 ## Step 2: Create the app shell
 
+## 第 2 步：创建应用外壳
+
+
 Use the CLI to automatically create the app shell.
 
+使用 CLI 自动创建一个应用外壳。
+
+
 <code-example format="." language="bash" linenums="false">
 ng generate app-shell --client-project my-app --universal-project server-app
 </code-example>
 
-* `my-app` takes the name of your client application.
-* `server-app` takes the name of the Universal (or server) application.
+- `my-app` takes the name of your client application.
+
+  `my-app` 是本客户端应用的名字。
+
+- `server-app` takes the name of the Universal (or server) application.
+
+  `server-app` 是这个 Universal（或 server）应用的名字。
+
 
 After running this command you will notice that the `angular.json` configuration file has been updated to add two new targets, with a few other changes.
 
+执行完这个命令，你会发现 `angular.json` 配置文件中已经增加了两个新目标，并做了一些其它更改。
+
+
 <code-example format="." language="none" linenums="false">
 "server": {
   "builder": "@angular-devkit/build-angular:server",
@@ -50,10 +88,18 @@ After running this command you will notice that the `angular.json` configuration
 
 ## Step 3: Verify the app is built with the shell content
 
+## 第 3 步：验证该应用是使用应用外壳的内容构建的
+
+
 Use the CLI to build the `app-shell` target.
 
+使用 CLI 构建目标 `app-shell`。
+
+
 <code-example format="." language="bash" linenums="false">
 ng run my-app:app-shell
 </code-example>
 
 To verify the build output, open `dist/my-app/index.html`. Look for default text `app-shell works!` to show that the app shell route was rendered as part of the output.
+
+要验证构建的输出，请打开 `dist/my-app/index.html`。寻找默认的文本 `app-shell works!` 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。