fix: merge code & fix some issues

aio/content/guide/dependency-injection.md

@@ -97,7 +97,7 @@ The `@Injectable` decorator is an essential ingredient in every Angular service
 The rest of the class has been rewritten to expose a `getHeroes` method 
 that returns the same mock data as before.
 
-[`@Injectable` 装饰器](#injectable)是定义每个 Angular 服务时的必备部分。
+`@Injectable` 装饰器是定义每个 Angular 服务时的必备部分。
 把该类的其它部分改写为暴露一个返回和以前一样的 mock 数据的 `getHeroes` 方法。
 
 <code-example path="dependency-injection/src/app/heroes/hero.service.3.ts" title="src/app/heroes/hero.service.3.ts">

aio/content/marketing/docs.md

@@ -7,56 +7,31 @@ Angular is a platform that makes it easy to build applications with the web. Ang
 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。
 
 <div class="card-container">
-
   <a href="generated/live-examples/toh-pt1/stackblitz.html" target="_blank" class="docs-card"
     title="Experience Angular in a live coding environment">
-
       <section>Get a Glimpse of Angular</section>
-
       <section>Angular 走马观花</section>
-
       <p>A quick look at an Angular "hello world" application.</p>
-
       <p>快速体验 Angular 的 "hello world" 应用。</p>
-
       <p class="card-footer">Angular in Action</p>
-
       <p class="card-footer">体验 Angular</p>
-
   </a>
-
   <a href="guide/quickstart" class="docs-card" title="Angular Quickstart">
-
       <section>Get Going with Angular</section>
-
       <section>开始使用 Angular</section>
-
       <p>Get going on your own environment with the Quickstart.</p>
-
       <p>跟随"快速上手"构建你的开发环境</p>
-
       <p class="card-footer">Quickstart</p>
-
       <p class="card-footer">快速上手</p>
-
   </a>
-
   <a href="guide/architecture" class="docs-card" title="Angular Architecture">
-
       <section>Fundamentals</section>
-
       <section>基本原理</section>
-
       <p>Learn Angular application fundamentals, starting with an architecture overview.</p>
-
       <p>学习 Angular 应用的基本原理。<br/>从架构概览开始。</p>
-
       <p class="card-footer">Architecture</p>
-
       <p class="card-footer">架构</p>
-
   </a>
-
 </div>
 
 ## Assumptions
@@ -74,8 +49,9 @@ Most Angular code can be written with just the latest JavaScript,
 using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection,
 and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata.
 
+
 本文档假设你已经熟悉了 [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript") 和来自 [最新标准](https://babeljs.io/learn-es2015/ "Latest JavaScript standards") 的一些知识，比如  [类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") 和 [模块](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules")。
-下列代码范例都是用最新版本的 JavaScript 写的，利用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") 实现依赖注入，并使用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators")来提供元数据。
+下列代码范例都是用最新版本的 [TypeScript](https://www.typescriptlang.org/ "TypeScript") 写的，利用 [类型](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") 实现依赖注入，并使用[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators")来提供元数据。
 
 ## Feedback
 

aio/src/app/documents/document.service.ts

@@ -5,6 +5,8 @@ import { AsyncSubject, Observable, of } from 'rxjs';
 import { catchError, switchMap, tap } from 'rxjs/operators';
 
 import { DocumentContents } from './document-contents';
+import { Logger } from '../shared/logger.service';
+import { LocationService } from '../shared/location.service';
 
 export { DocumentContents } from './document-contents';
 

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -1,11 +1,10 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core';
-import { HostListener } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
-import { Title, Meta } from '@angular/platform-browser';
 
 import { Observable, of, timer } from 'rxjs';
 import { catchError, switchMap, takeUntil, tap } from 'rxjs/operators';
 
-import { DocumentContents, FILE_NOT_FOUND_ID, FETCHING_ERROR_ID } from 'app/documents/document.service';
+import { DocumentContents, FETCHING_ERROR_ID, FILE_NOT_FOUND_ID } from 'app/documents/document.service';
 import { Logger } from 'app/shared/logger.service';
 import { TocService } from 'app/shared/toc.service';
 import { ElementsLoader } from 'app/custom-elements/elements-loader';
@@ -136,8 +135,8 @@ export class DocViewerComponent implements OnDestroy {
       // Security: `doc.contents` is always authored by the documentation team
       //           and is considered to be safe.
       tap(() => this.nextViewContainer.innerHTML = doc.contents || ''),
-        tap(() => swapOriginAndResult(this.nextViewContainer))
+      tap(() => swapOriginAndResult(this.nextViewContainer)),
-      .do(() =>addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id)),
+      tap(() => addTitleAndToc = this.prepareTitleAndToc(this.nextViewContainer, doc.id)),
       switchMap(() => this.elementsLoader.loadContainingCustomElements(this.nextViewContainer)),
       tap(() => this.docReady.emit())
       ,
@@ -174,7 +173,8 @@ export class DocViewerComponent implements OnDestroy {
    * entering animation has been completed. This is useful for work that needs to be done as soon as
    * the element has been attached to the DOM.
    */
-  protected swapViews(onInsertedCb = () => {}): Observable<void> {
+  protected swapViews(onInsertedCb = () => {
+  }): Observable<void> {
     const raf$ = new Observable<void>(subscriber => {
       const rafId = requestAnimationFrame(() => {
         subscriber.next();
@@ -210,8 +210,9 @@ export class DocViewerComponent implements OnDestroy {
             switchMap(() => raf$), tap(() => elem.style[prop] = from),
             switchMap(() => raf$), tap(() => elem.style.transition = `all ${duration}ms ease-in-out`),
             switchMap(() => raf$), tap(() => (elem.style as any)[prop] = to),
-                    switchMap(() => timer(getActualDuration(elem))),switchMap(() => this.void$),
+            switchMap(() => timer(getActualDuration(elem))), switchMap(() => this.void$),
-        );};
+          );
+      };
 
     const animateLeave = (elem: HTMLElement) => animateProp(elem, 'opacity', '1', '0.1');
     const animateEnter = (elem: HTMLElement) => animateProp(elem, 'opacity', '0.1', '1');

aio/src/app/shared/toc.service.ts

@@ -1,9 +1,8 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ReplaySubject } from 'rxjs';
 import { ScrollSpyInfo, ScrollSpyService } from 'app/shared/scroll-spy.service';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
+import { ReplaySubject } from 'rxjs';
 
 
 export interface TocItem {