From e6f3b76ce7e54343961acd74ea7bf5840c2f159b Mon Sep 17 00:00:00 2001
From: Zhicheng Wang <zcwang@thoughtworks.com>
Date: Thu, 20 Sep 2018 14:45:44 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=81=9A=E4=BA=86=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E7=AE=80=E9=99=8B=E7=9A=84=20SSR=20=E9=A1=B5=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E5=AF=B9=E6=90=9C=E7=B4=A2=E5=BC=95=E6=93=8E=E5=8F=8B=E5=A5=BD?=
 =?UTF-8?q?=EF=BC=8C=E8=80=8C=E4=B8=94=E5=9F=BA=E6=9C=AC=E4=B8=8D=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aio/deploy-cn.sh                              |   1 +
 aio/package.json                              |   1 +
 .../translator/assets/aio-shell-template.html | 765 ++++++++++++++++++
 aio/tools/translator/bin/ssr.ts               |  23 +
 aio/yarn.lock                                 |   8 +-
 5 files changed, 797 insertions(+), 1 deletion(-)
 create mode 100644 aio/tools/translator/assets/aio-shell-template.html
 create mode 100644 aio/tools/translator/bin/ssr.ts

diff --git a/aio/deploy-cn.sh b/aio/deploy-cn.sh
index 5402d189da..c8ed69ea8b 100755
--- a/aio/deploy-cn.sh
+++ b/aio/deploy-cn.sh
@@ -9,6 +9,7 @@ set -x
 cd `dirname $0`
 
 yarn build
+ts-node ./tools/translator/bin/ssr.ts
 cp -r dist/* ../../ng-docs.github.io/
 cd ../../ng-docs.github.io
 
diff --git a/aio/package.json b/aio/package.json
index eac0d405fe..7ff69839ff 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -88,6 +88,7 @@
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.4.1",
     "jasmine": "^2.6.0",
+    "mkdirp": "^0.5.1",
     "ng-pwa-tools": "^0.0.10",
     "rxjs": "6.0.0-uncanny-rc.7",
     "rxjs-compat": "6.0.0-uncanny-rc.7",
diff --git a/aio/tools/translator/assets/aio-shell-template.html b/aio/tools/translator/assets/aio-shell-template.html
new file mode 100644
index 0000000000..d901a5a467
--- /dev/null
+++ b/aio/tools/translator/assets/aio-shell-template.html
@@ -0,0 +1,765 @@
+<aio-shell ng-version="6.0.0"
+           class="mode-stable sidenav-open page-guide-template-syntax folder-guide view-SideNav aio-notification-hide ">
+  <div id="top-of-page"></div><!---->
+  <mat-toolbar class="app-toolbar no-print mat-toolbar mat-primary mat-toolbar-multiple-rows" color="primary">
+    <mat-toolbar-row class="notification-container mat-toolbar-row">
+      <aio-notification actionurl="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4"
+                        buttontext="Learn More" expirationdate="2018-07-01" icon="insert_comment"
+                        iconlabel="Announcement" notificationid="angular-v6-announcement"
+                        class="ng-tns-c2-0 ng-trigger ng-trigger-hideAnimation" style="height: 0px;"><a class="content"
+                                                                                                        href="https://blog.angular.io/version-6-0-0-of-angular-now-available-cc56b0efa7a4">
+        <mat-icon class="icon mat-icon" role="img" aria-hidden="true" aria-label="Announcement">
+          <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path>
+            <path d="M0 0h24v24H0z" fill="none"></path>
+          </svg>
+        </mat-icon>
+        <span class="message"> Version 6 of Angular Now Available! </span><span class="action-button">Learn More</span></a>
+        <button class="close-button mat-icon-button" aria-label="Close" mat-icon-button=""><span
+          class="mat-button-wrapper"><mat-icon aria-label="Dismiss notification" class="mat-icon ng-tns-c2-0" role="img"
+                                               svgicon="close" aria-hidden="true"><svg fill="#ffffff" height="24"
+                                                                                       viewBox="0 0 24 24" width="24"
+                                                                                       xmlns="http://www.w3.org/2000/svg"><path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path
+          d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span>
+          <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
+          <div class="mat-button-focus-overlay"></div>
+        </button>
+      </aio-notification>
+    </mat-toolbar-row>
+    <mat-toolbar-row class="mat-toolbar-row">
+      <button class="hamburger mat-button" mat-button="" title="Docs menu"><span class="mat-button-wrapper"><mat-icon
+        class="mat-icon" role="img" svgicon="menu" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg"
+                                                                           focusable="false" viewBox="0 0 24 24"><path
+        d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span>
+        <div class="mat-button-ripple mat-ripple" matripple=""></div>
+        <div class="mat-button-focus-overlay"></div>
+      </button>
+      <a class="nav-link home" href="/"><!----><img alt="Home" height="40"
+                                                    src="assets/images/logos/angular/logo-nav@2x.png" title="Home"
+                                                    width="150" class="ng-star-inserted"><!----></a><!---->
+      <aio-top-menu class="ng-star-inserted">
+        <ul role="navigation"><!---->
+          <li class="ng-star-inserted"><a class="nav-link" href="features" title="特性">特性</a></li>
+          <li class="ng-star-inserted"><a class="nav-link" href="docs" title="文档">文档</a></li>
+          <li class="ng-star-inserted"><a class="nav-link" href="resources" title="资源">资源</a></li>
+          <li class="ng-star-inserted"><a class="nav-link" href="events" title="会议">会议</a></li>
+          <li class="ng-star-inserted"><a class="nav-link" href="https://blog.angular.io/" title="博客">博客</a></li>
+          <li class="ng-star-inserted"><a class="nav-link" href="translations/cn/home" title="关于中文版">关于中文版</a></li>
+        </ul>
+      </aio-top-menu>
+      <aio-search-box class="search-container"><input aria-label="search" placeholder="搜索" type="search">
+      </aio-search-box>
+      <div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter"><img
+        src="assets/images/logos/twitter-icon.svg"></a><a href="https://github.com/angular/angular" title="GitHub"><img
+        src="assets/images/logos/github-icon.svg"></a></div>
+    </mat-toolbar-row>
+  </mat-toolbar><!---->
+  <mat-sidenav-container
+    class="sidenav-container mat-drawer-container mat-sidenav-container mat-drawer-transition has-floating-toc"
+    role="main"><!---->
+    <div class="mat-drawer-backdrop ng-star-inserted"></div>
+    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div>
+    <mat-sidenav
+      class="sidenav mat-drawer mat-sidenav ng-tns-c6-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted"
+      tabindex="-1" style="transform: translate3d(0px, 0px, 0px); visibility: visible;"><!---->
+      <aio-nav-menu><!---->
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-1 collapsed"
+                                                  style="position: relative" href="guide/quickstart" title="Angular 破冰"
+                                                  target="_self"> 快速上手 <!----></a><!----></div><!----></aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!----><!---->
+          <div class="ng-star-inserted"><!----><!---->
+            <button class="vertical-menu-item heading ng-star-inserted level-1 expanded" type="button"
+                    title="此《英雄指南》教程会带你用 TypeScript 一步步创建一个 Angular 应用。" aria-pressed="true"> 教程
+              <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true">
+                <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                  <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                </svg>
+              </mat-icon>
+            </button>
+            <div class="heading-children level-1 expanded"><!---->
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial"
+                                                        title="第一部分：《英雄指南》教程简介" target="_self"> 1. 简介 <!----></a><!---->
+                </div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt0"
+                                                        title="第二部分：创建应用的外壳" target="_self"> 2. 应用的“外壳” <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt1"
+                                                        title="第三部分：构建一个简单的英雄编辑器" target="_self"> 3. 英雄编辑器 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt2"
+                                                        title="第四部分：构建一个主从结构的页面，用于展现英雄列表" target="_self"> 4. 显示英雄列表
+                  <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt3"
+                                                        title="第五部分：把主从结构的页面重构成多个组件" target="_self"> 5. 主从组件 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt4"
+                                                        title="第六部分：创建一个可复用的服务来管理英雄数据" target="_self"> 6. 服务 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt5"
+                                                        title="第七部分：添加 Angular 路由器，并且学习在视图之间导航" target="_self"> 7. 路由
+                  <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="tutorial/toh-pt6"
+                                                        title="第八部分：通过 HTTP 来获取并保存英雄数据" target="_self"> 8. HTTP
+                  <!----></a><!----></div><!----></aio-nav-item>
+            </div>
+          </div>
+        </aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!----><!---->
+          <div class="ng-star-inserted"><!----><!---->
+            <button class="vertical-menu-item heading ng-star-inserted level-1 expanded selected" type="button"
+                    title="学习 Angular 的核心知识" aria-pressed="true"> 核心知识
+              <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true">
+                <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                  <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                </svg>
+              </mat-icon>
+            </button>
+            <div class="heading-children level-1 expanded selected"><!---->
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Angular 应用的基本构造块。" aria-pressed="true"> 架构
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/architecture" title="Angular 应用的基本构造块" target="_self"> 架构概览 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/architecture-modules" title="关于模块。" target="_self"> 模块（NgModule）简介 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"> 组件简介 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"> 服务与 DI 简介 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/architecture-next-steps" title="学完基础知识之后……" target="_self"> 后续步骤 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded selected" type="button"
+                          title="使用数据绑定构建动态视图" aria-pressed="true"> 组件与模板
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded selected"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"> 显示数据 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 expanded selected" style="position: relative"
+                        href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"> 模板语法
+                        <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self">
+                        生命周期钩子 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"> 组件交互 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"> 组件样式 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/elements" title="把组件转换成自定义元素。" target="_self"> Angular 自定义元素 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/dynamic-component-loader" title="动态加载组件" target="_self"> 动态组件 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"> 属性型指令 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"> 结构型指令 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"> 管道 <!----></a><!----></div><!---->
+                    </aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/animations" title="Angular 动画体系指南" target="_self"> 动画 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Angular 的表单" aria-pressed="true"> 表单
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/user-input" title="用户输入触发 DOM 事件。我们通过事件绑定来监听它们，把更新过的数据导入回我们的组件和 model。"
+                        target="_self"> 用户输入 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/forms" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。"
+                        target="_self"> 模板驱动表单 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/form-validation" title="验证用户的表单输入" target="_self"> 表单验证 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/reactive-forms" title="使用 FormBuilder 、分组和数组创建响应式表单。" target="_self"> 响应式表单
+                        <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/dynamic-form" title="使用FormGroup渲染动态表单" target="_self"> 动态表单 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Observable 与 RxJS" aria-pressed="true"> Observable 与 RxJS
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/observables" title="" target="_self"> 可观察对象(Observable) <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/rx-library" title="" target="_self"> RxJS 库 <!----></a><!----></div><!---->
+                    </aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/observables-in-angular" title="" target="_self"> Angular 中的可观察对象 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/practical-observable-usage" title="" target="_self"> 用法实战 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/comparing-observables" title="" target="_self"> 与其它技术的比较 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/bootstrapping"
+                                                        title="在应用的根模块（AppModule）中告诉 Angular 如何构造并引导引用。" target="_self">
+                  引导启动 <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Angular 中的模块" aria-pressed="true"> Angular 模块
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"> NgModule 简介 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"> JS 模块 vs
+                        NgModule <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/frequent-ngmodules" title="介绍最常用的 Angular 模块" target="_self"> 常用模块 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/module-types" title="介绍特性模块的几种类型" target="_self"> 特性模块的分类 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"> 入口组件 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"> 特性模块 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/providers" title="服务提供商与 Angular 模块" target="_self"> 服务提供商 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/singleton-services" title="创建单例应用" target="_self"> 单例应用 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"> 惰性加载的特性模块<!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/sharing-ngmodules" title="共享 Angular 模块让你的应用现代化。" target="_self"> 共享 Angular 模块
+                        <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"> NgModule API <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"> NgModule 常见问题<!----></a>
+                        <!----></div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="依赖注入：创建并注入各种服务。" aria-pressed="true"> 依赖注入
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/dependency-injection-pattern" title="学习 Angular 依赖注入系统背后的依赖注入模式" target="_self">
+                        依赖注入模式 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。"
+                        target="_self"> Angular 依赖注入 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/hierarchical-dependency-injection" title="Angular 的多级注入体系会建立与组件平行的注入器树。"
+                        target="_self"> 多级注入器 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"> DI 实用技巧<!----></a>
+                        <!----></div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/http"
+                                                        title="通过 HTTP 协议与远程服务器对话。" target="_self"> HttpClient
+                  <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/router"
+                                                        title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"> 路由与导航
+                  <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/testing"
+                                                        title="测试 Angular 应用的技巧与实践。" target="_self"> 测试 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/cheatsheet"
+                                                        title="关于 Angular 常用编码技术的快速指南。" target="_self"> 速查表 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+            </div>
+          </div>
+        </aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!----><!---->
+          <div class="ng-star-inserted"><!----><!---->
+            <button class="vertical-menu-item heading ng-star-inserted level-1 expanded" type="button"
+                    title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="true"> 其它技术
+              <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right" aria-hidden="true">
+                <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                  <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                </svg>
+              </mat-icon>
+            </button>
+            <div class="heading-children level-1 expanded"><!---->
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/i18n"
+                                                        title="把应用模板中的文本翻译成多种语言。" target="_self"> 国际化 (i18n) <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/language-service"
+                                                        title="使用 Angular 语言服务来为开发提速。" target="_self"> 语言服务 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/security"
+                                                        title="Angular 应用开发中的安全技术。" target="_self"> 安全 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="环境准备与部署" aria-pressed="true"> 环境准备与部署
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/setup" title="在你自己的机器上安装 Angular QuickStart 种子，以便更快、更高效的开发。" target="_self">
+                        搭建本地开发环境 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/setup-systemjs-anatomy" title="基于 SystemJS 的本地开发环境内幕。" target="_self"> 搭建方式剖析
+                        <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/browser-support" title="浏览器支持与 Polyfills 指南" target="_self"> 浏览器支持 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/npm-packages" title="建议的 npm 包，以及如何指定包的依赖。" target="_self"> npm 包 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self">
+                        TypeScript 配置 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/aot-compiler" title="学习如何使用 AOT 预编译器。" target="_self"> 预先（AOT）编译 <!----></a><!---->
+                      </div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/deployment" title="学习如何部署你的 Angular 应用。" target="_self"> 部署 <!----></a><!----></div>
+                      <!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Angular 的 Service Worker：控制应用的资源缓存。" aria-pressed="true"> Service Worker
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。"
+                        target="_self"> 简介 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。"
+                        target="_self"> 快速起步 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。"
+                        target="_self"> 与 Service Worker 通讯 <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。"
+                        target="_self"> 生产环境下的 Service Worker <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"> Service
+                        Worker 配置 <!----></a><!----></div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="Angular 的发布实践，更新计划以及与更新有关的资源。" aria-pressed="true"> 保持最新
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/updating" title="关于如何把 Angular 应用升级到最新版的信息。" target="_self"> 更新你的项目 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/releases" title="Angular 的版本、发布、支持与弃用策略。" target="_self"> Angular 的版本发布 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!----><!---->
+                <div class="ng-star-inserted"><!----><!---->
+                  <button class="vertical-menu-item heading ng-star-inserted level-2 expanded" type="button"
+                          title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="true"> 从 AngularJS 升级
+                    <mat-icon class="rotating-icon mat-icon" role="img" svgicon="keyboard_arrow_right"
+                              aria-hidden="true">
+                      <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
+                        <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
+                      </svg>
+                    </mat-icon>
+                  </button>
+                  <div class="heading-children level-2 expanded"><!---->
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"> 升级步骤 <!----></a>
+                        <!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/upgrade-performance"
+                        title="Upgrade from AngularJS to Angular in a more flexible way." target="_self"> Upgrading for
+                        Performance <!----></a><!----></div><!----></aio-nav-item>
+                    <aio-nav-item class="ng-star-inserted"><!---->
+                      <div class="ng-star-inserted"><!----><a
+                        class="vertical-menu-item ng-star-inserted level-3 collapsed" style="position: relative"
+                        href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self">
+                        AngularJS 与 Angular 的概念对照 <!----></a><!----></div><!----></aio-nav-item>
+                  </div>
+                </div>
+              </aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 expanded"
+                                                        style="position: relative" href="guide/universal"
+                                                        title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"> 服务端渲染
+                  <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/visual-studio-2015"
+                                                        title="在 Visual Studio 2015 中使用快速起步中的文件" target="_self"> Visual
+                  Studio 2015 快速上手 <!----></a><!----></div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/styleguide"
+                                                        title="写出 Angular 风格的程序" target="_self"> 风格指南 <!----></a><!---->
+                </div><!----></aio-nav-item>
+              <aio-nav-item class="ng-star-inserted"><!---->
+                <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-2 collapsed"
+                                                        style="position: relative" href="guide/glossary"
+                                                        title="Angular 中最重要的词汇的简要定义。" target="_self"> 词汇表 <!----></a>
+                  <!----></div><!----></aio-nav-item>
+            </div>
+          </div>
+        </aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-1 collapsed"
+                                                  style="position: relative" href="api" title="关于 Angular 中类和值的详细信息。"
+                                                  target="_self"> API 参考手册 <!----></a><!----></div><!---->
+        </aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><!---->
+            <div class="mat-divider ng-star-inserted" style="margin: 4px 20px; border-top: 1px solid lightgray"></div>
+          </div><!----></aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-1 collapsed"
+                                                  style="position: relative"
+                                                  href="https://github.com/ng-docs/ng-docs.github.io/issues"
+                                                  title="github 上的中文互助问答区" target="_blank"> 互助问答 <!---->
+            <mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new
+            </mat-icon>
+          </a><!----></div><!----></aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-1 collapsed"
+                                                  style="position: relative" href="https://material.angular.cn"
+                                                  title="Angular Material 组件库的中文文档" target="_blank"> 官方 Material 组件库
+            <!---->
+            <mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new
+            </mat-icon>
+          </a><!----></div><!----></aio-nav-item>
+        <aio-nav-item class="ng-star-inserted"><!---->
+          <div class="ng-star-inserted"><!----><a class="vertical-menu-item ng-star-inserted level-1 collapsed"
+                                                  style="position: relative" href="https://ng.ant.design/"
+                                                  title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"> ng-zorro
+            组件库 <!---->
+            <mat-icon class="mat-icon material-icons ng-star-inserted" role="img" aria-hidden="true">open_in_new
+            </mat-icon>
+          </a><!----></div><!----></aio-nav-item>
+      </aio-nav-menu>
+      <div class="doc-version">
+        <aio-select>
+          <div class="form-select-menu">
+            <button class="form-select-button"><strong></strong><!---->stable (v6.1.0)</button><!----></div>
+        </aio-select>
+      </div>
+    </mat-sidenav>
+    <div tabindex="-1" class="cdk-visually-hidden cdk-focus-trap-anchor"></div><!---->
+    <mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted"
+                         style="margin-left: 264px; margin-right: 0px;">
+      <aio-page-content-placeholder></aio-page-content-placeholder>
+    </mat-sidenav-content>
+  </mat-sidenav-container><!---->
+  <div class="toc-container no-print ng-star-inserted" style="max-height: 34485px;">
+    <aio-lazy-ce selector="aio-toc">
+      <aio-toc ng-version="6.0.0"><!---->
+      </aio-toc>
+    </aio-lazy-ce>
+  </div>
+  <footer class="no-print">
+    <aio-footer>
+      <div class="grid-fluid"><!---->
+        <div class="footer-block ng-star-inserted"><h3>资源</h3>
+          <ul><!---->
+            <li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li>
+            <li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li>
+            <li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li>
+            <li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a>
+            </li>
+          </ul>
+        </div>
+        <div class="footer-block ng-star-inserted"><h3>帮助</h3>
+          <ul><!---->
+            <li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular"
+                                            title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li>
+            <li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a>
+            </li>
+            <li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues"
+                                            title="在 github 上报告问题和建议。">报告问题</a></li>
+            <li class="ng-star-inserted"><a class="link"
+                                            href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md"
+                                            title="让我们彼此尊重">行为规范</a></li>
+          </ul>
+        </div>
+        <div class="footer-block ng-star-inserted"><h3>社区</h3>
+          <ul><!---->
+            <li class="ng-star-inserted"><a class="link" href="events"
+                                            title="Post issues and suggestions on github.">活动</a></li>
+            <li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/"
+                                            title="参加聚会，向别的开发人员学习">聚会</a></li>
+            <li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a>
+            </li>
+            <li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular"
+                                            title="GitHub">GitHub</a></li>
+            <li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li>
+          </ul>
+        </div>
+        <div class="footer-block ng-star-inserted"><h3>多语言</h3>
+          <ul><!---->
+            <li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English
+              Version</a></li>
+            <li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li>
+          </ul>
+        </div>
+      </div>
+      <p> Powered by Google ©2010-2018. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a
+        href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
+      </p>
+      <p> 当前版本：6.1.1-local+sha.fe5eef45e.
+      </p></aio-footer>
+  </footer>
+</aio-shell>
diff --git a/aio/tools/translator/bin/ssr.ts b/aio/tools/translator/bin/ssr.ts
new file mode 100644
index 0000000000..49f13ae2f8
--- /dev/null
+++ b/aio/tools/translator/bin/ssr.ts
@@ -0,0 +1,23 @@
+import * as fs from 'fs';
+import * as mkdirp from 'mkdirp';
+import * as path from 'path';
+
+function buildSsrPages(): void {
+  const navigation = fs.readFileSync('./content/navigation.json', 'utf-8');
+  const indexTemplate = fs.readFileSync('./dist/index.html', 'utf-8');
+  const aioShellTemplate = fs.readFileSync(__dirname + '/../assets/aio-shell-template.html');
+  const pageTemplate = indexTemplate.replace('<aio-shell></aio-shell>', `<aio-shell>${aioShellTemplate}</aio-shell>`);
+  const urls = navigation.match(/"url": "(.*?)"/g)
+    .map((entry) => entry.replace(/^"url": "(.*?)".*$/, '$1'))
+    .filter(url => url.slice(0, 4) !== 'http')
+    .forEach(url => {
+      const generated: { title: string, content: string } = JSON.parse(fs.readFileSync(`./dist/generated/docs/${url}.json`, 'utf-8'));
+      const pageContent = pageTemplate
+        .replace('<title>Angular Docs</title>', `<title>${generated.title} - Angular 官方文档</title>`)
+        .replace('<aio-page-content-placeholder></aio-page-content-placeholder>', generated.content);
+      mkdirp.sync(path.dirname(`./dist/${url}`));
+      fs.writeFileSync(`./dist/${url}.html`, pageContent, 'utf-8');
+    });
+}
+
+buildSsrPages();
diff --git a/aio/yarn.lock b/aio/yarn.lock
index 79ce7ab267..dc6ca0a7c4 100644
--- a/aio/yarn.lock
+++ b/aio/yarn.lock
@@ -6974,12 +6974,18 @@ mkdirp-promise@^5.0.0:
   dependencies:
     mkdirp "*"
 
-mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
+mkdirp@*, mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@~0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^0.5.1:
+  version "0.5.1"
+  resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  dependencies:
+    minimist "0.0.8"
+
 modelo@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/modelo/-/modelo-4.2.0.tgz#3b4b420023a66ca7e32bdba16e710937e14d1b0b"