From 30d67563b1e42b5aecbcdf21a5b489aa8730d3b2 Mon Sep 17 00:00:00 2001
From: VTHINKXIE <vthinkxie@users.noreply.github.com>
Date: Thu, 15 Mar 2018 23:08:28 +0800
Subject: [PATCH] build: fix bugs block build (#1145)

* build: fix bugs block build

* fix(module:modal): fix modal bug

* fix(module:modal): use overlay to handle modal by default

* fix(module:modal): set nzGetContainer default to undefined

* fix select in modal

* docs(changelog): complete modal's changelog
---
 README-zh_CN.md                               |  56 ++++-
 README.md                                     |  46 ++--
 build_scripts/generate-less.js                |   2 +-
 build_scripts/replace-publish.sh              |   2 +
 .../nz-autocomplete-option.component.ts       |   1 -
 .../nz-autocomplete-trigger.directive.ts      |  37 +--
 .../nz-autocomplete.component.ts              |  57 +++--
 components/auto-complete/style/index.less     |  79 ++++++
 components/cascader/nz-cascader.component.ts  | 187 ++++++++------
 components/cascader/style/index.less          |   0
 components/components.less                    |   4 +-
 components/core/util/mesure-scrollbar.ts      |   2 +-
 components/core/util/nz-global-monitor.ts.del |  41 ----
 components/form/nz-form-control.component.ts  |   2 +-
 components/form/nz-form-item.component.ts     |   2 +-
 components/form/nz-form-label.component.ts    |   2 +-
 components/icon/doc/index.en-US.md            |   3 +-
 components/icon/doc/index.zh-CN.md            |   2 +-
 components/index.ts                           | 149 ------------
 components/menu/doc/index.en-US.md            |   2 +-
 components/menu/doc/index.zh-CN.md            |   2 +-
 components/message/demo/duration.ts           |   4 +-
 components/message/demo/info.ts               |   4 +-
 components/message/demo/loading.ts            |   6 +-
 components/message/demo/other.ts              |   8 +-
 components/message/index.ts                   |   1 +
 components/message/nz-message.service.ts      |   2 +-
 components/message/public-api.ts              |   6 +
 components/modal/demo/async.ts                |   6 +-
 components/modal/demo/footer.ts               |  20 +-
 components/modal/demo/locale.ts               |   8 +-
 components/modal/demo/position.ts             |  22 +-
 components/modal/demo/service.ts              |  68 +++---
 components/modal/doc/index.en-US.md           |   2 +-
 components/modal/doc/index.zh-CN.md           |   2 +-
 components/modal/nz-modal.component.html      |  20 +-
 components/modal/nz-modal.component.ts        |  92 ++++---
 components/modal/nz-modal.module.ts           |   2 +-
 components/modal/nz-modal.service.ts          |   2 +-
 .../{ng-zorro.less => ng-zorro-antd.less}     |   0
 components/ng-zorro-antd.module.ts            |  59 +++--
 components/notification/demo/basic.ts         |   4 +-
 components/notification/demo/custom-icon.md   |   2 +-
 components/notification/demo/custom-icon.ts   |   4 +-
 components/notification/demo/custom-style.md  |   4 +-
 components/notification/demo/custom-style.ts  |  10 +-
 components/notification/demo/duration.md      |   2 +-
 components/notification/demo/duration.ts      |   4 +-
 components/notification/demo/placement.ts     |  12 +-
 components/notification/demo/with-btn.ts      |   4 +-
 components/notification/demo/with-icon.ts     |   4 +-
 components/notification/doc/index.en-US.md    |   2 +-
 components/notification/doc/index.zh-CN.md    |   2 +-
 components/notification/index.ts              |   1 +
 components/notification/public-api.ts         |   6 +
 components/popconfirm/doc/index.en-US.md      |   2 +-
 components/popconfirm/doc/index.zh-CN.md      |   2 +-
 components/popconfirm/index.ts                |   1 +
 .../popconfirm/nz-popconfirm.component.html   |  14 +-
 .../popconfirm/nz-popconfirm.component.ts     |  18 +-
 components/popconfirm/nz-popconfirm.module.ts |   2 +-
 components/popconfirm/nz-popconfirm.spec.ts   |  10 +-
 components/popconfirm/public-api.ts           |   3 +
 components/popover/doc/index.en-US.md         |   4 +-
 components/popover/doc/index.zh-CN.md         |   4 +-
 components/popover/index.ts                   |   1 +
 components/popover/nz-popover.spec.ts         |  12 +-
 components/popover/public-api.ts              |   3 +
 components/select/doc/index.en-US.md          |   2 +-
 components/select/nz-select.component.ts      |   3 +
 components/slider/index.ts                    |   1 +
 components/slider/public-api.ts               |   7 +
 components/style/core/base.less               |   6 +-
 components/tooltip/doc/index.en-US.md         |   2 +-
 components/tooltip/doc/index.zh-CN.md         |   6 +-
 components/tooltip/index.ts                   |   1 +
 components/tooltip/nz-tooltip.component.ts    |   2 +-
 components/tooltip/nz-tooltip.spec.ts         |  18 +-
 components/tooltip/public-api.ts              |   3 +
 docs/changelog.en-US.md                       | 229 +-----------------
 docs/changelog.zh-CN.md                       | 191 +++++++++++++--
 docs/contributing.en-US.md                    |  50 ++--
 docs/contributing.zh-CN.md                    |  47 ++--
 docs/customize-theme.en-US.md                 |  49 +---
 docs/customize-theme.zh-CN.md                 |  55 +----
 docs/faq.en-US.md                             |   6 +
 docs/faq.zh-CN.md                             |  39 +++
 docs/getting-started.en-US.md                 | 209 +++++-----------
 docs/getting-started.zh-CN.md                 | 220 ++++++-----------
 docs/i18n.en-US.md                            |  47 ++--
 docs/i18n.zh-CN.md                            |  47 ++--
 docs/introduce.en-US.md                       | 105 +-------
 docs/introduce.zh-CN.md                       | 110 ++-------
 docs/recommendation.en-US.md                  |  56 ++---
 docs/recommendation.zh-CN.md                  |  68 +++---
 package.json                                  |   8 +-
 release-helper.sh                             |   5 +
 rollup.config.js                              |   2 +
 site_scripts/_site/src/app/app.component.html |   3 +
 site_scripts/_site/src/styles.less            |   2 +-
 site_scripts/_site/src/tsconfig.app.json      |   2 +-
 101 files changed, 1207 insertions(+), 1543 deletions(-)
 create mode 100755 build_scripts/replace-publish.sh
 create mode 100644 components/auto-complete/style/index.less
 mode change 100755 => 100644 components/cascader/style/index.less
 delete mode 100644 components/core/util/nz-global-monitor.ts.del
 delete mode 100644 components/index.ts
 create mode 100644 components/message/index.ts
 create mode 100644 components/message/public-api.ts
 rename components/{ng-zorro.less => ng-zorro-antd.less} (100%)
 create mode 100644 components/notification/index.ts
 create mode 100644 components/notification/public-api.ts
 create mode 100644 components/popconfirm/index.ts
 create mode 100644 components/popconfirm/public-api.ts
 create mode 100644 components/popover/index.ts
 create mode 100644 components/popover/public-api.ts
 create mode 100644 components/slider/index.ts
 create mode 100644 components/slider/public-api.ts
 create mode 100644 components/tooltip/index.ts
 create mode 100644 components/tooltip/public-api.ts
 create mode 100644 docs/faq.en-US.md
 create mode 100644 docs/faq.zh-CN.md
 create mode 100644 release-helper.sh

diff --git a/README-zh_CN.md b/README-zh_CN.md
index 438d71f573e..d9fff77b04f 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -6,7 +6,7 @@
 
 # NG-ZORRO
 [![Travis branch](https://img.shields.io/travis/NG-ZORRO/ng-zorro-antd/0.7.0.svg?style=flat-square)](https://travis-ci.org/NG-ZORRO/ng-zorro-antd)
-[![codecov](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd/branch/0.7.0/graph/badge.svg)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
+[![Codecov](https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd/0.7.0.svg?style=flat-square)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
 [![Gemnasium](https://img.shields.io/gemnasium/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://gemnasium.com/github.com/NG-ZORRO/ng-zorro-antd)
 [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 [![GitHub Release Date](https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
@@ -14,38 +14,74 @@
 [![NPM downloads](http://img.shields.io/npm/dm/ng-zorro-antd.svg?style=flat-square)](https://npmjs.org/package/ng-zorro-antd)
 [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd)
 
-这里是 Ant Design 的 Angular 5.0 实现，开发和服务于企业级后台产品。
+这里是 Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 
 [README in English](README.md)
 
 ## 特性
 
-- 提炼自企业级中后台产品的交互语言和视觉风格，定期与Ant Design React版本保持更新一致。
+- 提炼自企业级中后台产品的交互语言和视觉风格。
 - 开箱即用的高质量 Angular 组件。
 - 使用 TypeScript 构建，提供完整的类型定义文件。
 
 ## 支持环境
 
-* 现代浏览器和 IE9 以上（需要 [polyfills](https://angular.io/guide/browser-support))。
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://angular.io/guide/browser-support)）。
 
-## 兼容版本
+## 版本
 
-当前支持Angular`^5.0.0`版本
+- [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 
 
 ## 安装
 
-**我们推荐使用 npm 方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
+### 使用 npm 或 yarn 安装
+
+**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
 
 ```bash
 $ npm install ng-zorro-antd --save
 ```
 
+```bash
+$ yarn add ng-zorro-antd
+```
+
 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
 
 ## 标准开发
 
-实际项目开发中，你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。
-我们推荐官方的 `@angular/cli` 工具链辅助进行开发
+实际项目开发中，你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求，我们强烈推荐官方的 `@angular/cli` 工具链辅助进行开发。
+> 如果你想了解更多CLI工具链的功能和命令，建议访问 [Angular CLI](https://github.com/angular/angular-cli) 了解更多
+
+
+## 链接
+
+- [首页](http://ng.ant.design)
+- [Angular官方文档](https://angular.io/)
+- [开发脚手架](https://cli.angular.io/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [RxJS](https://github.com/ReactiveX/rxjs)
+
+## 谁在使用
+
+- [阿里巴巴](http://www.alibaba.com/)
+- [阿里云](http://www.aliyun.com/)
+
+> 如果你的公司和产品使用了 NG-ZORRO，欢迎到 [这里](https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142) 留言。
+
+## 如何贡献
+
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls)，或给我们 [报告 Bug](http://ng.ant.design/issue-helper/#/new-issue)。
+
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
+
+## 社区互助
+
+如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
+
+通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `ng-zorro` 标签。
 
-如果你想了解更多CLI工具链的功能和命令，建议访问[Angular CLI](https://github.com/angular/angular-cli)了解更多
+1. [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](https://stackoverflow.com/questions/tagged/ng-zorro)（English）
+2. [<img alt="Segment Fault" src="http://static.segmentfault.com/global/img/logo.svg" width="100" />](https://segmentfault.com/t/ng-zorro)（中文）
+3. [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd)
diff --git a/README.md b/README.md
index 7696d5d6c03..fea91035f74 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 
 # NG-ZORRO
 [![Travis branch](https://img.shields.io/travis/NG-ZORRO/ng-zorro-antd/0.7.0.svg?style=flat-square)](https://travis-ci.org/NG-ZORRO/ng-zorro-antd)
-[![codecov](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd/branch/0.7.0/graph/badge.svg)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
+[![Codecov](https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd/0.7.0.svg?style=flat-square)](https://codecov.io/gh/NG-ZORRO/ng-zorro-antd)
 [![Gemnasium](https://img.shields.io/gemnasium/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://gemnasium.com/github.com/NG-ZORRO/ng-zorro-antd)
 [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 [![GitHub Release Date](https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square)](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
@@ -23,42 +23,50 @@ An enterprise-class UI components based on Ant Design and Angular.
 
 - An enterprise-class UI design language for web applications.
 - A set of high-quality Angular components out of the box.
-- Written in TypeScript with complete define types.
+- Written in TypeScript with complete defined types.
 
 ## Environment Support
 
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://angular.io/guide/browser-support)).
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://angular.io/guide/browser-support))
 
-## Angular Version Support
+## Version
 
-* Angular`^5.0.0`
+- [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 
+## Installation
 
-## Install
+### Using npm or yarn
+
+**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
 
 ```bash
 $ npm install ng-zorro-antd --save
 ```
 
-## Development
-
 ```bash
-$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
-$ npm install
-$ npm start
+$ yarn add ng-zorro-antd
 ```
 
+If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
 
-## Links
 
-- [Home page](http://ng.ant.design)
-- [Angular](https://angular.io)
-- [Angular CLI](https://cli.angular.io/)
-- [TypeScript](https://www.typescriptlang.org/)
-- [RxJS](https://github.com/ReactiveX/rxjs)
+## Companies using antd
 
+- [Alibaba](http://www.alibaba.com/)
+- [Aliyun](http://www.aliyun.com/)
+
+> If your company or product uses NG-ZORRO, let us know [here](https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142)!
 
 ## Contributing
 
-We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md) first.
-You can submit any ideas as [pull request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls)，or as [GitHub issues](https://github.com/NG-ZORRO/ng-zorro-antd/issues)。
+Please read our [CONTRIBUTING.md](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md) first.
+
+If you'd like to help us improve ng-zorro-antd, just create a [Pull Request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls). Feel free to report bugs and issues [here](http://ng.ant.design/issue-helper/#/new-issue).
+
+> If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
+
+## Need Help?
+
+For questions on how to use antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/ng-zorro) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd) as well.
+
+As always, we encourage experienced users to help those who are not familiar with `ng-zorro-antd`!
diff --git a/build_scripts/generate-less.js b/build_scripts/generate-less.js
index 6d5ae5547a4..a4ad9b532a9 100644
--- a/build_scripts/generate-less.js
+++ b/build_scripts/generate-less.js
@@ -16,4 +16,4 @@ targetFolder.forEach(dir => {
 )
 wrench.copyDirSyncRecursive(path.resolve(sourcePath, 'style'), path.resolve(targetPath, 'style'));
 fs.writeFileSync(`${targetPath}/components.less`, componentsLessContent);
-fs.writeFileSync(`${targetPath}/ng-zorro.less`, fs.readFileSync(`${sourcePath}/ng-zorro.less`));
\ No newline at end of file
+fs.writeFileSync(`${targetPath}/ng-zorro-antd.less`, fs.readFileSync(`${sourcePath}/ng-zorro-antd.less`));
\ No newline at end of file
diff --git a/build_scripts/replace-publish.sh b/build_scripts/replace-publish.sh
new file mode 100755
index 00000000000..71cf92226dd
--- /dev/null
+++ b/build_scripts/replace-publish.sh
@@ -0,0 +1,2 @@
+sed 's/components\/ng-zorro-antd.module.ts/publish/g' site/src/tsconfig.app.json > site/src/tsconfig.app.json_back
+mv site/src/tsconfig.app.json_back site/src/tsconfig.app.json
diff --git a/components/auto-complete/nz-autocomplete-option.component.ts b/components/auto-complete/nz-autocomplete-option.component.ts
index b708d9ce65b..6cf3338d921 100644
--- a/components/auto-complete/nz-autocomplete-option.component.ts
+++ b/components/auto-complete/nz-autocomplete-option.component.ts
@@ -1,4 +1,3 @@
-import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
index 2f7d78b2b40..dd50b1ad270 100644
--- a/components/auto-complete/nz-autocomplete-trigger.directive.ts
+++ b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -26,15 +26,17 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { merge } from 'rxjs/observable/merge';
-import { delay, distinct, map } from 'rxjs/operators';
+import { delay } from 'rxjs/operators/delay';
+import { distinct } from 'rxjs/operators/distinct';
+import { map } from 'rxjs/operators/map';
 
 import { NzAutocompleteOptionComponent } from './nz-autocomplete-option.component';
 import { NzAutocompleteComponent } from './nz-autocomplete.component';
 
 export const NZ_AUTOCOMPLETE_VALUE_ACCESSOR: ExistingProvider = {
-  provide: NG_VALUE_ACCESSOR,
+  provide    : NG_VALUE_ACCESSOR,
   useExisting: forwardRef(() => NzAutocompleteTriggerDirective),
-  multi: true
+  multi      : true
 };
 
 export function getNzAutocompleteMissingPanelError(): Error {
@@ -44,15 +46,15 @@ export function getNzAutocompleteMissingPanelError(): Error {
 }
 
 @Directive({
-  selector: `input[nzAutocomplete], textarea[nzAutocomplete]`,
-  providers: [NZ_AUTOCOMPLETE_VALUE_ACCESSOR],
-  host: {
-    'autocomplete': 'off',
+  selector : `input[nzAutocomplete], textarea[nzAutocomplete]`,
+  providers: [ NZ_AUTOCOMPLETE_VALUE_ACCESSOR ],
+  host     : {
+    'autocomplete'     : 'off',
     'aria-autocomplete': 'list',
-    '(focusin)': 'handleFocus()',
-    '(blur)': 'handleBlur()',
-    '(input)': 'handleInput($event)',
-    '(keydown)': 'handleKeydown($event)'
+    '(focusin)'        : 'handleFocus()',
+    '(blur)'           : 'handleBlur()',
+    '(input)'          : 'handleInput($event)',
+    '(keydown)'        : 'handleKeydown($event)'
   }
 })
 export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnDestroy {
@@ -86,7 +88,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
   constructor(private _element: ElementRef, private _overlay: Overlay,
               private _viewContainerRef: ViewContainerRef,
-              @Optional() @Inject(DOCUMENT) private _document: Document) {
+              // tslint:disable-next-line:no-any
+              @Optional() @Inject(DOCUMENT) private _document: any) {
   }
 
   openPanel(): void {
@@ -177,7 +180,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.overlayRef = this._overlay.create(this.getOverlayConfig());
     } else {
       // 如果没有设置 nzDisplayWith 则使用 Host 元素的宽度
-      this.overlayRef.updateSize({width: this.nzAutocomplete.nzWidth || this.getHostWidth()});
+      this.overlayRef.updateSize({ width: this.nzAutocomplete.nzWidth || this.getHostWidth() });
     }
     this.overlayPositionChangeSubscription = this.subscribeOverlayPositionChange();
     if (this.overlayRef && !this.overlayRef.hasAttached()) {
@@ -204,9 +207,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
       positionStrategy: this.getOverlayPosition(),
-      scrollStrategy: this._overlay.scrollStrategies.reposition(),
+      scrollStrategy  : this._overlay.scrollStrategies.reposition(),
       // 如果没有设置 nzWidth 则使用 Host 元素的宽度
-      width: this.nzAutocomplete.nzWidth || this.getHostWidth()
+      width           : this.nzAutocomplete.nzWidth || this.getHostWidth()
     });
   }
 
@@ -221,9 +224,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private getOverlayPosition(): PositionStrategy {
     this.positionStrategy = this._overlay.position().connectedTo(
       this.getConnectedElement(),
-      {originX: 'start', originY: 'bottom'}, {overlayX: 'start', overlayY: 'top'})
+      { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
     .withFallbackPosition(
-      {originX: 'start', originY: 'top'}, {overlayX: 'start', overlayY: 'bottom'}
+      { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }
     );
     return this.positionStrategy;
   }
diff --git a/components/auto-complete/nz-autocomplete.component.ts b/components/auto-complete/nz-autocomplete.component.ts
index 221d59bfcb9..e51597e81dc 100644
--- a/components/auto-complete/nz-autocomplete.component.ts
+++ b/components/auto-complete/nz-autocomplete.component.ts
@@ -16,7 +16,9 @@ import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { defer } from 'rxjs/observable/defer';
 import { merge } from 'rxjs/observable/merge';
-import { filter, switchMap, take } from 'rxjs/operators';
+import { filter } from 'rxjs/operators/filter';
+import { switchMap } from 'rxjs/operators/switchMap';
+import { take } from 'rxjs/operators/take';
 
 import { toBoolean } from '../core/util/convert';
 
@@ -38,29 +40,29 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
     dropDownAnimation
   ],
   template           : `
-  <ng-template>
-    <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft"
-         #panel
-         [@dropDownAnimation]="dropDownPosition"
-         [class.ant-select-dropdown-hidden]="!showPanel">
-      <div style="overflow: auto;">
+    <ng-template>
+      <div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft"
+        #panel
+        [@dropDownAnimation]="dropDownPosition"
+        [class.ant-select-dropdown-hidden]="!showPanel">
+        <div style="overflow: auto;">
           <ul class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
-          role="menu"
-          aria-activedescendant>
+            role="menu"
+            aria-activedescendant>
             <ng-template *ngTemplateOutlet="nzDataSource ? optionsTemplate : contentTemplate"></ng-template>
           </ul>
+        </div>
       </div>
-    </div>
-    <ng-template #contentTemplate>
-      <ng-content></ng-content>
+      <ng-template #contentTemplate>
+        <ng-content></ng-content>
+      </ng-template>
+      <ng-template #optionsTemplate>
+        <nz-auto-option *ngFor="let option of nzDataSource" [nzValue]="option">{{option}}</nz-auto-option>
+      </ng-template>
     </ng-template>
-    <ng-template #optionsTemplate>
-      <nz-auto-option *ngFor="let option of nzDataSource" [nzValue]="option">{{option}}</nz-auto-option>
-    </ng-template>
-  </ng-template>
   `,
   styles             : [
-    `
+      `
       :host {
         position: relative;
         display: inline-block;
@@ -85,6 +87,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   isOpen: boolean = false;
   activeItem: NzAutocompleteOptionComponent;
   dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
+
   /** 组件支持设置 dataSource 和 content 设置 options
    *  这个属性为其提供方便的访问方式 */
   get options(): QueryList<NzAutocompleteOptionComponent> {
@@ -113,26 +116,38 @@ export class NzAutocompleteComponent implements AfterViewInit {
 
   /** 是否默认高亮第一个选项，默认 `true` */
   @Input()
-  get nzDefaultActiveFirstOption(): boolean { return this._defaultActiveFirstOption; }
+  get nzDefaultActiveFirstOption(): boolean {
+    return this._defaultActiveFirstOption;
+  }
+
   set nzDefaultActiveFirstOption(value: boolean) {
     this._defaultActiveFirstOption = toBoolean(value);
   }
+
   _defaultActiveFirstOption: boolean = true;
 
   /** 使用键盘选择选项的时候把选中项回填到输入框中，默认 `false` */
   @Input()
-  get nzBackfill(): boolean { return this._backfill; }
+  get nzBackfill(): boolean {
+    return this._backfill;
+  }
+
   set nzBackfill(value: boolean) {
     this._backfill = toBoolean(value);
   }
+
   _backfill: boolean = false;
 
   /** 自动完成的数据源 */
   @Input()
-  get nzDataSource(): AutocompleteDataSource { return this._dataSource; }
+  get nzDataSource(): AutocompleteDataSource {
+    return this._dataSource;
+  }
+
   set nzDataSource(value: AutocompleteDataSource) {
     this._dataSource = value;
   }
+
   _dataSource: AutocompleteDataSource;
 
   /** 选择时发出的事件 */
@@ -161,7 +176,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   }
 
   setActiveItem(index: number): void {
-    const activeItem = this.options.toArray()[index];
+    const activeItem = this.options.toArray()[ index ];
     if (activeItem && !activeItem.active) {
       this.activeItem = activeItem;
       this.activeItemIndex = index;
diff --git a/components/auto-complete/style/index.less b/components/auto-complete/style/index.less
new file mode 100644
index 00000000000..a8105799c55
--- /dev/null
+++ b/components/auto-complete/style/index.less
@@ -0,0 +1,79 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@input-prefix-cls: ~"@{ant-prefix}-input";
+@select-prefix-cls: ~"@{ant-prefix}-select";
+@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
+
+.@{autocomplete-prefix-cls} {
+  .reset-component;
+
+  &.@{select-prefix-cls} {
+    .@{select-prefix-cls} {
+      &-selection {
+        border: 0;
+        box-shadow: none;
+        &__rendered {
+          margin-left: 0;
+          margin-right: 0;
+          height: 100%;
+          line-height: @input-height-base;
+        }
+        &__placeholder {
+          margin-left: (@input-padding-horizontal-base + 1px);
+          margin-right: (@input-padding-horizontal-base + 1px);
+        }
+
+        &--single {
+          height: auto;
+        }
+      }
+    }
+
+    // Fix https://github.com/ant-design/ant-design/issues/7800
+    .@{select-prefix-cls}-search--inline {
+      position: static;
+      float: left;
+    }
+
+    &-allow-clear {
+      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
+        margin-right: 0 !important;
+      }
+    }
+
+    .@{input-prefix-cls} {
+      background: transparent;
+      border-width: @border-width-base;
+      line-height: @line-height-base;
+      height: @input-height-base;
+      &:focus,
+      &:hover {
+        .hover;
+      }
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__rendered {
+        line-height: @input-height-lg;
+      }
+      .@{input-prefix-cls} {
+        padding-top: @input-padding-vertical-lg;
+        padding-bottom: @input-padding-vertical-lg;
+        height: @input-height-lg;
+      }
+    }
+
+    &-sm {
+      .@{select-prefix-cls}-selection__rendered {
+        line-height: @input-height-sm;
+      }
+      .@{input-prefix-cls} {
+        padding-top: @input-padding-vertical-sm;
+        padding-bottom: @input-padding-vertical-sm;
+        height: @input-height-sm;
+      }
+    }
+  }
+}
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
index aebc809782a..1a154799d03 100644
--- a/components/cascader/nz-cascader.component.ts
+++ b/components/cascader/nz-cascader.component.ts
@@ -30,7 +30,7 @@ function toArray<T>(value: T | T[]): T[] {
   if (value == null) {
     ret = [];
   } else if (!Array.isArray(value)) {
-    ret = [value];
+    ret = [ value ];
   } else {
     ret = value;
   }
@@ -39,14 +39,14 @@ function toArray<T>(value: T | T[]): T[] {
 
 function arrayEquals<T>(array1: T[], array2: T[]): boolean {
   if (!array1 || !array2 || array1.length !== array2.length) {
-      return false;
+    return false;
   }
 
   const len = array1.length;
   for (let i = 0; i < len; i++) {
-      if (array1[i] !== array2[i]) {
-          return false;
-      }
+    if (array1[ i ] !== array2[ i ]) {
+      return false;
+    }
   }
   return true;
 }
@@ -66,16 +66,17 @@ export interface CascaderOption {
   isLeaf?: boolean;
   parent?: CascaderOption;
   children?: CascaderOption[];
+
   [key: string]: any;
 }
 
 @Component({
-  selector            : 'nz-cascader,[nz-cascader]',
-  preserveWhitespaces : false,
-  animations          : [
+  selector           : 'nz-cascader,[nz-cascader]',
+  preserveWhitespaces: false,
+  animations         : [
     dropDownAnimation
   ],
-  template            : `
+  template           : `
     <div
       cdkOverlayOrigin
       #origin="cdkOverlayOrigin"
@@ -144,7 +145,7 @@ export interface CascaderOption {
       </div>
     </ng-template>
   `,
-  providers            : [
+  providers          : [
     NzUpdateHostClassService,
     {
       provide    : NG_VALUE_ACCESSOR,
@@ -152,9 +153,15 @@ export interface CascaderOption {
       multi      : true
     }
   ],
-  host: {
+  host               : {
     '[attr.tabIndex]': '"0"'
-  }
+  },
+  styles             : [
+      `.ant-cascader-menus {
+      margin-top: 4px;
+      margin-bottom: 4px;
+    }`
+  ]
 })
 export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAccessor {
   private allowClear = true;
@@ -177,13 +184,13 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   private isOpening = false;
 
   // 内部样式
-  private _arrowCls: {[name: string]: any};
-  private _clearCls: {[name: string]: any};
-  private _inputCls: {[name: string]: any};
-  private _labelCls: {[name: string]: any};
-  private _loadingCls: {[name: string]: any};
-  private _menuCls: {[name: string]: any};
-  private _menuColumnCls: {[name: string]: any};
+  private _arrowCls: { [name: string]: any };
+  private _clearCls: { [name: string]: any };
+  private _inputCls: { [name: string]: any };
+  private _labelCls: { [name: string]: any };
+  private _loadingCls: { [name: string]: any };
+  private _menuCls: { [name: string]: any };
+  private _menuColumnCls: { [name: string]: any };
 
   public el: HTMLElement;
   private isFocused = false;
@@ -212,6 +219,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   get inputValue(): string {
     return this._inputValue;
   }
+
   set inputValue(inputValue: string) {
     this._inputValue = inputValue;
     this.setClassMap();
@@ -227,6 +235,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.labelRenderTpl = value;
     this.isLabelRenderTemplate = (value instanceof TemplateRef);
   }
+
   get nzLabelRender(): TemplateRef<any> {
     return this.labelRenderTpl;
   }
@@ -244,6 +253,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.setMenuClass();
     this.setMenuColumnClass();
   }
+
   get nzPrefixCls(): string {
     return this.prefixCls;
   }
@@ -255,6 +265,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.setClassMap();
     this.setInputClass();
   }
+
   get nzDisabled(): boolean {
     return this.disabled;
   }
@@ -266,6 +277,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.setClassMap();
     this.setInputClass();
   }
+
   get nzSize(): NzCascaderSize {
     return this.size;
   }
@@ -275,11 +287,13 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   set nzShowInput(value: boolean) {
     this.showInput = toBoolean(value);
   }
+
   get nzShowInput(): boolean {
     return this.showInput;
   }
 
   /** Whether can search. Defaults to `false`. */
+
   /* // not support yet
   @Input()
   set nzShowSearch(value: boolean) {
@@ -295,6 +309,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   set nzAllowClear(value: boolean) {
     this.allowClear = toBoolean(value);
   }
+
   get nzAllowClear(): boolean {
     return this.allowClear;
   }
@@ -304,6 +319,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   set nzAutoFocus(value: boolean) {
     this.autoFocus = toBoolean(value);
   }
+
   get nzAutoFocus(): boolean {
     return this.autoFocus;
   }
@@ -313,6 +329,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   set nzShowArrow(value: boolean) {
     this.showArrow = toBoolean(value);
   }
+
   get nzShowArrow(): boolean {
     return this.showArrow;
   }
@@ -323,6 +340,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.menuClassName = value;
     this.setMenuClass();
   }
+
   get nzMenuClassName(): string {
     return this.menuClassName;
   }
@@ -333,16 +351,18 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     this.columnClassName = value;
     this.setMenuColumnClass();
   }
+
   get nzColumnClassName(): string {
     return this.columnClassName;
   }
 
   /** Options for first column, sub column will be load async */
   @Input() set nzOptions(options: CascaderOption[] | null) {
-    this.nzColumns = options && options.length ? [options] : [];
+    this.nzColumns = options && options.length ? [ options ] : [];
   }
+
   get nzOptions(): CascaderOption[] {
-    return this.nzColumns[0];
+    return this.nzColumns[ 0 ];
   }
 
   /** Change value on each selection if set to true */
@@ -350,6 +370,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   set nzChangeOnSelect(value: boolean) {
     this.changeOnSelect = toBoolean(value);
   }
+
   get nzChangeOnSelect(): boolean {
     return this.changeOnSelect;
   }
@@ -379,7 +400,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   @Input() nzMouseLeaveDelay = 150; // ms
 
   /** Triggering mode: can be Array<'click'|'hover'> */
-  @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = ['click'];
+  @Input() nzTriggerAction: NzCascaderTriggerType | NzCascaderTriggerType[] = [ 'click' ];
 
   /** Property name for getting `value` in the option */
   @Input() nzValueProperty = 'value';
@@ -449,14 +470,14 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
 
   private setClassMap(): void {
     const classMap = {
-      [`${this.prefixCls}`]                   : 1,
-      [`${this.prefixCls}-picker`]            : 1,
-      [`${this.prefixCls}-lg`]                : this.nzSize === 'large',
-      [`${this.prefixCls}-sm`]                : this.nzSize === 'small',
-      [`${this.prefixCls}-picker-disabled`]   : this.disabled,
-      [`${this.prefixCls}-focused`]           : this.isFocused,
-      [`${this.prefixCls}-picker-open`]       : this.menuVisible,
-      [`${this.prefixCls}-picker-with-value`] : this.inputValue && this.inputValue.length
+      [ `${this.prefixCls}` ]                  : 1,
+      [ `${this.prefixCls}-picker` ]           : 1,
+      [ `${this.prefixCls}-lg` ]               : this.nzSize === 'large',
+      [ `${this.prefixCls}-sm` ]               : this.nzSize === 'small',
+      [ `${this.prefixCls}-picker-disabled` ]  : this.disabled,
+      [ `${this.prefixCls}-focused` ]          : this.isFocused,
+      [ `${this.prefixCls}-picker-open` ]      : this.menuVisible,
+      [ `${this.prefixCls}-picker-with-value` ]: this.inputValue && this.inputValue.length
     };
     this.nzUpdateHostClassService.updateHostClass(this.el, classMap);
   }
@@ -465,9 +486,10 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get labelCls(): any {
     return this._labelCls;
   }
+
   private setLabelClass(): void {
     this._labelCls = {
-      [`${this.prefixCls}-picker-label`]: true
+      [ `${this.prefixCls}-picker-label` ]: true
     };
   }
 
@@ -475,10 +497,11 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get arrowCls(): any {
     return this._arrowCls;
   }
+
   private setArrowClass(): void {
     this._arrowCls = {
-      [`${this.prefixCls}-picker-arrow`]       : true,
-      [`${this.prefixCls}-picker-arrow-expand`]: this.menuVisible
+      [ `${this.prefixCls}-picker-arrow` ]       : true,
+      [ `${this.prefixCls}-picker-arrow-expand` ]: this.menuVisible
     };
   }
 
@@ -486,9 +509,10 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get loadingCls(): any {
     return this._loadingCls;
   }
+
   private setLoadingClass(): void {
     this._loadingCls = {
-      [`${this.prefixCls}-picker-arrow`]: true
+      [ `${this.prefixCls}-picker-arrow` ]: true
     };
   }
 
@@ -496,9 +520,10 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get clearCls(): any {
     return this._clearCls;
   }
+
   private setClearClass(): void {
     this._clearCls = {
-      [`${this.prefixCls}-picker-clear`]: true
+      [ `${this.prefixCls}-picker-clear` ]: true
     };
   }
 
@@ -506,12 +531,13 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get inputCls(): any {
     return this._inputCls;
   }
+
   private setInputClass(): void {
     this._inputCls = {
-      [`${this.prefixCls}-input`]        : 1,
-      [`${this.inputPrefixCls}-disabled`]: this.nzDisabled,
-      [`${this.inputPrefixCls}-lg`]      : this.nzSize === 'large',
-      [`${this.inputPrefixCls}-sm`]      : this.nzSize === 'small'
+      [ `${this.prefixCls}-input` ]        : 1,
+      [ `${this.inputPrefixCls}-disabled` ]: this.nzDisabled,
+      [ `${this.inputPrefixCls}-lg` ]      : this.nzSize === 'large',
+      [ `${this.inputPrefixCls}-sm` ]      : this.nzSize === 'small'
     };
   }
 
@@ -519,11 +545,12 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get menuCls(): any {
     return this._menuCls;
   }
+
   private setMenuClass(): void {
     this._menuCls = {
-      [`${this.prefixCls}-menus`]        : true,
-      [`${this.prefixCls}-menus-hidden`] : !this.menuVisible,
-      [`${this.nzMenuClassName}`]        : this.nzMenuClassName
+      [ `${this.prefixCls}-menus` ]       : true,
+      [ `${this.prefixCls}-menus-hidden` ]: !this.menuVisible,
+      [ `${this.nzMenuClassName}` ]       : this.nzMenuClassName
     };
   }
 
@@ -531,21 +558,22 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   public get menuColumnCls(): any {
     return this._menuColumnCls;
   }
+
   private setMenuColumnClass(): void {
     this._menuColumnCls = {
-      [`${this.prefixCls}-menu`]  : true,
-      [`${this.nzColumnClassName}`]: this.nzColumnClassName
+      [ `${this.prefixCls}-menu` ]   : true,
+      [ `${this.nzColumnClassName}` ]: this.nzColumnClassName
     };
   }
 
   /** 获取列中Option的样式 */
   public getOptionCls(option: CascaderOption, index: number): any {
     return {
-      [`${this.prefixCls}-menu-item`]         : true,
-      [`${this.prefixCls}-menu-item-expand`]  : !option.isLeaf,
-      [`${this.prefixCls}-menu-item-active`]  : this.isActivedOption(option, index),
-      [`${this.prefixCls}-menu-item-disabled`]: option.disabled,
-      [`${this.prefixCls}-menu-item-loading`] : option.loading
+      [ `${this.prefixCls}-menu-item` ]         : true,
+      [ `${this.prefixCls}-menu-item-expand` ]  : !option.isLeaf,
+      [ `${this.prefixCls}-menu-item-active` ]  : this.isActivedOption(option, index),
+      [ `${this.prefixCls}-menu-item-disabled` ]: option.disabled,
+      [ `${this.prefixCls}-menu-item-loading` ] : option.loading
     };
   }
 
@@ -588,7 +616,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
 
   /** Whether to show input element placeholder */
   public get showPlaceholder(): boolean {
-    return !(this.hasInput() || this.hasValue() );
+    return !(this.hasInput() || this.hasValue());
   }
 
   /** Whether the clear button is visible */
@@ -621,13 +649,13 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     const labels: string[] = selectedOptions.map(o => this.getOptionLabel(o));
     // 设置当前控件的显示值
     if (this.isLabelRenderTemplate) {
-      this.labelRenderContext = {labels, selectedOptions};
+      this.labelRenderContext = { labels, selectedOptions };
     } else {
       this.labelRenderText = defaultDisplayRender.call(this, labels, selectedOptions);
     }
   }
 
-  @HostListener('keydown', ['$event'])
+  @HostListener('keydown', [ '$event' ])
   public onKeyDown(event: KeyboardEvent): void {
     const keyCode = event.keyCode;
     if (keyCode !== DOWN_ARROW &&
@@ -669,7 +697,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     }
   }
 
-  @HostListener('click', ['$event'])
+  @HostListener('click', [ '$event' ])
   public onTriggerClick(event: MouseEvent): void {
     if (this.nzDisabled) {
       return;
@@ -681,7 +709,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     }
   }
 
-  @HostListener('mouseenter', ['$event'])
+  @HostListener('mouseenter', [ '$event' ])
   public onTriggerMouseEnter(event: MouseEvent): void {
     if (this.nzDisabled) {
       return;
@@ -691,7 +719,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     }
   }
 
-  @HostListener('mouseleave', ['$event'])
+  @HostListener('mouseleave', [ '$event' ])
   public onTriggerMouseLeave(event: MouseEvent): void {
     if (this.nzDisabled) {
       return;
@@ -705,7 +733,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
       const hostEl = this.el;
       const menuEl = this.menu && this.menu.nativeElement as HTMLElement;
       if (hostEl.contains(mouseTarget) || (menuEl && menuEl.contains(mouseTarget))
-          /*|| mouseTarget.parentElement.contains(menuEl)*/) {
+      /*|| mouseTarget.parentElement.contains(menuEl)*/) {
         // 因为浮层的backdrop出现，暂时没有办法自动消失
         return;
       }
@@ -755,7 +783,9 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
         this.setMenuVisible(visible);
         this.clearDelayTimer();
         if (visible) {
-          setTimeout(() => { this.isOpening = false; }, 100);
+          setTimeout(() => {
+            this.isOpening = false;
+          }, 100);
         }
       }, delay);
     } else {
@@ -797,16 +827,16 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
 
   /** 获取Option的值，例如，可以指定labelProperty="name"来取Name */
   public getOptionLabel(option: CascaderOption): any {
-    return option[this.nzLabelProperty || 'label'];
+    return option[ this.nzLabelProperty || 'label' ];
   }
 
   /** 获取Option的值，例如，可以指定valueProperty="id"来取ID */
   public getOptionValue(option: CascaderOption): any {
-    return option[this.nzValueProperty || 'value'];
+    return option[ this.nzValueProperty || 'value' ];
   }
 
   private isActivedOption(option: CascaderOption, index: number): boolean {
-    const activeOpt = this.activatedOptions[index];
+    const activeOpt = this.activatedOptions[ index ];
     return activeOpt === option;
   }
 
@@ -822,12 +852,12 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
       return;
     }
 
-    this.activatedOptions[index] = option;
+    this.activatedOptions[ index ] = option;
 
     // 当直接选择最后一级时，前面的选项要补全。例如，选择“城市”，则自动补全“国家”、“省份”
     for (let i = index - 1; i >= 0; i--) {
-      if (!this.activatedOptions[i]) {
-        this.activatedOptions[i] = this.activatedOptions[i + 1].parent;
+      if (!this.activatedOptions[ i ]) {
+        this.activatedOptions[ i ] = this.activatedOptions[ i + 1 ].parent;
       }
     }
     // 截断多余的选项，如选择“省份”，则只会有“国家”、“省份”，去掉“城市”、“区县”
@@ -900,8 +930,8 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   }
 
   private setColumnData(options: CascaderOption[], index: number): void {
-    if (!arrayEquals(this.nzColumns[index], options)) {
-      this.nzColumns[index] = options;
+    if (!arrayEquals(this.nzColumns[ index ], options)) {
+      this.nzColumns[ index ] = options;
       if (index < this.nzColumns.length - 1) {
         this.nzColumns = this.nzColumns.slice(0, index + 1);
       }
@@ -930,7 +960,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   /** 按下回车键时选择 */
   private onEnter(): void {
     const columnIndex = Math.max(this.activatedOptions.length - 1, 0);
-    const activeOption = this.activatedOptions[columnIndex];
+    const activeOption = this.activatedOptions[ columnIndex ];
     if (activeOption && !activeOption.disabled) {
       this.onSelectOption(activeOption, columnIndex);
     }
@@ -942,9 +972,9 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   private moveUpOrDown(isUp: boolean): void {
     const columnIndex = Math.max(this.activatedOptions.length - 1, 0);
     // 该组中已经被激活的选项
-    const activeOption = this.activatedOptions[columnIndex];
+    const activeOption = this.activatedOptions[ columnIndex ];
     // 该组所有的选项，用于遍历获取下一个被激活的选项
-    const options = this.nzColumns[columnIndex] || [];
+    const options = this.nzColumns[ columnIndex ] || [];
     const length = options.length;
     let nextIndex = -1;
     if (!activeOption) { // 该列还没有选中的选项
@@ -958,7 +988,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
       if (nextIndex < 0 || nextIndex >= length) {
         break;
       }
-      const nextOption = options[nextIndex];
+      const nextOption = options[ nextIndex ];
       if (!nextOption || nextOption.disabled) {
         continue;
       }
@@ -970,6 +1000,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
   private moveUp(): void {
     this.moveUpOrDown(true);
   }
+
   private moveDown(): void {
     this.moveUpOrDown(false);
   }
@@ -989,7 +1020,7 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
    */
   private moveRight(): void {
     const length = this.activatedOptions.length;
-    const options = this.nzColumns[length];
+    const options = this.nzColumns[ length ];
     if (options && options.length) {
       const nextOpt = options.find(o => !o.disabled);
       if (nextOpt) {
@@ -1064,16 +1095,14 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
     }
   }
 
-  constructor(
-    private elementRef: ElementRef,
-    private cdr: ChangeDetectorRef,
-    private nzUpdateHostClassService: NzUpdateHostClassService
-  ) {
+  constructor(private elementRef: ElementRef,
+              private cdr: ChangeDetectorRef,
+              private nzUpdateHostClassService: NzUpdateHostClassService) {
     this.el = this.elementRef.nativeElement;
   }
 
   private findOption(option: any, index: number): CascaderOption {
-    const options: CascaderOption[] = this.nzColumns[index];
+    const options: CascaderOption[] = this.nzColumns[ index ];
     if (options) {
       const value = typeof option === 'object' ? this.getOptionValue(option) : option;
       return options.find(o => value === this.getOptionValue(o));
@@ -1092,11 +1121,11 @@ export class NzCascaderComponent implements OnInit, OnDestroy, ControlValueAcces
       let option = this.findOption(v, index);
       if (!option) {
         option = typeof v === 'object' ? v : {
-          [`${this.nzValueProperty}`]: v,
-          [`${this.nzLabelProperty}`]: v
+          [ `${this.nzValueProperty}` ]: v,
+          [ `${this.nzLabelProperty}` ]: v
         };
       }
-      array[index] = option;
+      array[ index ] = option;
       this.setActiveOption(option, index, false);
     });
     this.value = value;
diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
old mode 100755
new mode 100644
diff --git a/components/components.less b/components/components.less
index a453a71e9af..558c2fb19df 100644
--- a/components/components.less
+++ b/components/components.less
@@ -42,4 +42,6 @@
 @import "./timeline/style/index.less";
 @import "./tooltip/style/index.less";
 @import "./transfer/style/index.less";
-@import "./upload/style/index.less";
\ No newline at end of file
+@import "./upload/style/index.less";
+@import "./auto-complete/style/index.less";
+@import "./cascader/style/index.less";
\ No newline at end of file
diff --git a/components/core/util/mesure-scrollbar.ts b/components/core/util/mesure-scrollbar.ts
index 742830db980..2a977ca1096 100644
--- a/components/core/util/mesure-scrollbar.ts
+++ b/components/core/util/mesure-scrollbar.ts
@@ -6,7 +6,7 @@ const scrollbarMeasure = {
   top: '-9999px',
   width: '50px',
   height: '50px',
-  overflow: 'scroll',
+  overflow: 'scroll'
 };
 
 export function measureScrollbar(): number {
diff --git a/components/core/util/nz-global-monitor.ts.del b/components/core/util/nz-global-monitor.ts.del
deleted file mode 100644
index 654cc594e75..00000000000
--- a/components/core/util/nz-global-monitor.ts.del
+++ /dev/null
@@ -1,41 +0,0 @@
-import { EventEmitter } from '@angular/core';
-
-export interface Position {
-  x: number;
-  y: number;
-}
-
-export class NzGlobalMonitorService {
-  counter = 0;
-  lastClickPos: Position = {
-    x: 0,
-    y: 0
-  };
-
-  _navItemSource: EventEmitter<string> = new EventEmitter();
-
-  getGlobalCount(): number {
-    return ++this.counter;
-  }
-
-  setDocumentOverflowHidden(status: boolean): void {
-    document.body.style.overflow = status ? 'hidden' : '';
-  }
-
-  _observeGlobalEvents(): void {
-    // 监听document的点击事件，记录点击坐标，并抛出 documentClick 事件
-    document.addEventListener('click', (e) => {
-      this.lastClickPos = {
-        x: e.clientX,
-        y: e.clientY
-      };
-      this._navItemSource.emit('documentClick');
-    });
-  }
-
-  constructor() {
-    this._observeGlobalEvents();
-  }
-}
-
-export default new NzGlobalMonitorService();
diff --git a/components/form/nz-form-control.component.ts b/components/form/nz-form-control.component.ts
index 43e1609782d..5a2cf0fee16 100644
--- a/components/form/nz-form-control.component.ts
+++ b/components/form/nz-form-control.component.ts
@@ -3,7 +3,7 @@ import { FormControl, NgControl } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
-import { NzColComponent } from '../grid';
+import { NzColComponent } from '../grid/nz-col.component';
 
 @Component({
   selector           : 'nz-form-control',
diff --git a/components/form/nz-form-item.component.ts b/components/form/nz-form-item.component.ts
index 5a62c0ba32d..797cea0a7f7 100644
--- a/components/form/nz-form-item.component.ts
+++ b/components/form/nz-form-item.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
-import { NzRowComponent } from '../grid';
+import { NzRowComponent } from '../grid/nz-row.component';
 
 /** should add nz-row directive to host, track https://github.com/angular/angular/issues/8785 **/
 @Component({
diff --git a/components/form/nz-form-label.component.ts b/components/form/nz-form-label.component.ts
index 21bd8fbaed9..053eff5fb99 100644
--- a/components/form/nz-form-label.component.ts
+++ b/components/form/nz-form-label.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { toBoolean } from '../core/util/convert';
-import { NzColComponent } from '../grid';
+import { NzColComponent } from '../grid/nz-col.component';
 
 @Component({
   selector           : 'nz-form-label',
diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
index 8205bcccf6d..53c73eab087 100755
--- a/components/icon/doc/index.en-US.md
+++ b/components/icon/doc/index.en-US.md
@@ -27,7 +27,8 @@ Use tag `<i />` to create an icon and set its type in the class prop, for exampl
 
 ## Local deployment
 
-By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [this example](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
+By default, icons are deployed at [iconfont.cn](http://iconfont.cn), publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to [customize theme](/docs/customize-theme/en)。
+
 
 ## List of icons
 
diff --git a/components/icon/doc/index.zh-CN.md b/components/icon/doc/index.zh-CN.md
index 4e530bf3219..34d02a1159e 100755
--- a/components/icon/doc/index.zh-CN.md
+++ b/components/icon/doc/index.zh-CN.md
@@ -27,7 +27,7 @@ toc: false
 
 ## 本地部署
 
-图标默认托管在 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。
+图标默认托管在 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [自定义主题](/docs/customize-theme/zh)。
 
 ## 图标列表
 
diff --git a/components/index.ts b/components/index.ts
deleted file mode 100644
index 8a6b1833914..00000000000
--- a/components/index.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-
-import { NzAffixModule } from './affix/nz-affix.module';
-import { NzAlertModule } from './alert';
-import { NzAnchorModule } from './anchor/nz-anchor.module';
-import { NzAutocompleteModule } from './auto-complete/nz-autocomplete.module';
-import { NzAvatarModule } from './avatar/nz-avatar.module';
-import { NzBackTopModule } from './back-top/nz-back-top.module';
-import { NzBadgeModule } from './badge/nz-badge.module';
-import { NzBreadCrumbModule } from './breadcrumb/nz-breadcrumb.module';
-import { NzButtonModule } from './button';
-import { NzCalendarModule } from './calendar';
-import { NzCardModule } from './card';
-import { NzCarouselModule } from './carousel';
-import { NzCascaderModule } from './cascader';
-import { NzCheckboxModule } from './checkbox';
-import { NzCollapseModule } from './collapse';
-import { NzDividerModule } from './divider';
-import { NzDropdownService, NzDropDownModule } from './dropdown';
-import { NzFormModule } from './form/nz-form.module';
-import { NzGridModule } from './grid';
-import { NzI18nModule } from './i18n';
-import { NzInputModule } from './input';
-import { NzInputNumberModule } from './input-number';
-import { NzLayoutModule } from './layout';
-import { NzListModule } from './list';
-import { NzMenuModule } from './menu';
-import { NzMessageModule } from './message/nz-message.module';
-import { NzModalModule } from './modal';
-import { NzNotificationModule } from './notification/nz-notification.module';
-import { NzPaginationModule } from './pagination';
-import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
-import { NzPopoverModule } from './popover/nz-popover.module';
-import { NzProgressModule } from './progress';
-import { NzRadioModule } from './radio';
-import { NzRateModule } from './rate';
-import { NzSelectModule } from './select';
-import { NzSliderModule } from './slider/nz-slider.module';
-import { NzSpinModule } from './spin';
-import { NzStepsModule } from './steps';
-import { NzSwitchModule } from './switch';
-import { NzTableModule } from './table';
-import { NzTabsModule } from './tabs';
-import { NzTagModule } from './tag/nz-tag.module';
-import { NzTimelineModule } from './timeline';
-import { NzToolTipModule } from './tooltip/nz-tooltip.module';
-import { NzTransferModule } from './transfer';
-import { NzUploadModule } from './upload';
-
-export * from './affix';
-export * from './anchor';
-export * from './back-top';
-export * from './button';
-export * from './divider';
-export * from './grid';
-export * from './layout';
-export * from './dropdown';
-export * from './menu';
-export * from './upload';
-export * from './transfer';
-export * from './i18n';
-export * from './list/index';
-
-import { NzMessageService } from './message/nz-message.service';
-import { NzNotificationService } from './notification/nz-notification.service';
-
-export { NzNotificationService } from './notification/nz-notification.service';
-export { NzMessageService } from './message/nz-message.service';
-
-// Tokens (eg. global services' config)
-export { NZ_MESSAGE_CONFIG } from './message/nz-message-config';
-export { NZ_NOTIFICATION_CONFIG } from './notification/nz-notification-config';
-
-export * from './button';
-export * from './grid';
-export * from './layout';
-export * from './dropdown';
-export * from './menu';
-export * from './checkbox';
-export * from './input';
-export * from './i18n';
-export * from './list/index';
-export * from './modal/public-api';
-
-@NgModule({
-  exports: [
-    NzButtonModule,
-    NzCalendarModule,
-    NzGridModule,
-    NzSwitchModule,
-    NzSelectModule,
-    NzMenuModule,
-    NzBackTopModule,
-    NzAnchorModule,
-    NzAffixModule,
-    NzDropDownModule,
-    NzLayoutModule,
-    NzBreadCrumbModule,
-    NzPaginationModule,
-    NzStepsModule,
-    NzInputModule,
-    NzCheckboxModule,
-    NzInputNumberModule,
-    NzToolTipModule,
-    NzPopconfirmModule,
-    NzPopconfirmModule,
-    NzPopoverModule,
-    NzSliderModule,
-    NzRateModule,
-    NzBadgeModule,
-    NzRadioModule,
-    NzNotificationModule,
-    NzMessageModule,
-    NzAlertModule,
-    NzSpinModule,
-    NzProgressModule,
-    NzTabsModule,
-    NzCardModule,
-    NzAvatarModule,
-    NzTagModule,
-    NzTimelineModule,
-    NzTransferModule,
-    NzCarouselModule,
-    NzCascaderModule,
-    NzCollapseModule,
-    NzTableModule,
-    NzDividerModule,
-    NzFormModule,
-    NzListModule,
-    NzI18nModule,
-    NzUploadModule,
-    NzModalModule,
-    NzAutocompleteModule
-  ]
-})
-export class NgZorroAntdModule {
-
-  static forRoot(): ModuleWithProviders {
-    return {
-      ngModule : NgZorroAntdModule,
-      providers: [
-        // Services
-        NzNotificationService,
-        NzMessageService,
-        NzDropdownService
-      ]
-    };
-  }
-}
diff --git a/components/menu/doc/index.en-US.md b/components/menu/doc/index.en-US.md
index 9ca57a9db99..381089f8cf8 100755
--- a/components/menu/doc/index.en-US.md
+++ b/components/menu/doc/index.en-US.md
@@ -45,7 +45,7 @@ More layouts with navigation: [layout](/components/layout/en).
 | nzDisabled | whether menu item is disabled or not | boolean | false |
 | nzSelected | whether menu item is selected or not | boolean | false |
 
-### [nz-sub-menu]
+### [nz-submenu]
 
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
diff --git a/components/menu/doc/index.zh-CN.md b/components/menu/doc/index.zh-CN.md
index d54c72dc029..21171e24f72 100755
--- a/components/menu/doc/index.zh-CN.md
+++ b/components/menu/doc/index.zh-CN.md
@@ -46,7 +46,7 @@ subtitle: 导航菜单
 | nzDisabled | 是否禁用 | boolean | false |
 | nzSelected | 是否被选中 | boolean | false |
 
-### [nz-sub-menu]
+### [nz-submenu]
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
diff --git a/components/message/demo/duration.ts b/components/message/demo/duration.ts
index 332b3dc41f6..ef3da3d90cb 100644
--- a/components/message/demo/duration.ts
+++ b/components/message/demo/duration.ts
@@ -10,9 +10,9 @@ import { NzMessageService } from 'ng-zorro-antd';
 })
 export class NzDemoMessageDurationComponent {
   createBasicMessage(): void {
-    this._message.success('This is a prompt message for success, and it will disappear in 10 seconds', { nzDuration: 10000 });
+    this.message.success('This is a prompt message for success, and it will disappear in 10 seconds', { nzDuration: 10000 });
   }
 
-  constructor(private _message: NzMessageService) {
+  constructor(private message: NzMessageService) {
   }
 }
\ No newline at end of file
diff --git a/components/message/demo/info.ts b/components/message/demo/info.ts
index 878cf5f1031..42d51ee7ed4 100644
--- a/components/message/demo/info.ts
+++ b/components/message/demo/info.ts
@@ -10,10 +10,10 @@ import { NzMessageService } from 'ng-zorro-antd';
 })
 export class NzDemoMessageInfoComponent {
 
-  constructor(private _message: NzMessageService) {
+  constructor(private message: NzMessageService) {
   }
 
   createBasicMessage(): void {
-    this._message.info('This is a normal message');
+    this.message.info('This is a normal message');
   }
 }
diff --git a/components/message/demo/loading.ts b/components/message/demo/loading.ts
index 821a1b22420..39e5db23bbd 100644
--- a/components/message/demo/loading.ts
+++ b/components/message/demo/loading.ts
@@ -10,13 +10,13 @@ import { NzMessageService } from 'ng-zorro-antd';
 })
 export class NzDemoMessageLoadingComponent {
 
-  constructor(private _message: NzMessageService) {
+  constructor(private message: NzMessageService) {
   }
 
   createBasicMessage(): void {
-    const id = this._message.loading('Action in progress..', { nzDuration: 0 }).messageId;
+    const id = this.message.loading('Action in progress..', { nzDuration: 0 }).messageId;
     setTimeout(_ => {
-      this._message.remove(id);
+      this.message.remove(id);
     }, 2500);
   }
 }
diff --git a/components/message/demo/other.ts b/components/message/demo/other.ts
index 8cdd966ba54..8fbb64c9392 100644
--- a/components/message/demo/other.ts
+++ b/components/message/demo/other.ts
@@ -9,8 +9,8 @@ import { NzMessageService } from 'ng-zorro-antd';
     <button nz-button (click)="createMessage('warning')">Warning</button>
   `,
   styles  : [
-    `
-      :host ::ng-deep .ant-btn {
+      `
+      [nz-button] {
         margin-right: 8px;
       }
     `
@@ -18,9 +18,9 @@ import { NzMessageService } from 'ng-zorro-antd';
 })
 export class NzDemoMessageOtherComponent {
   createMessage(type: string): void {
-    this._message.create(type, `This is a message of ${type}`);
+    this.message.create(type, `This is a message of ${type}`);
   }
 
-  constructor(private _message: NzMessageService) {
+  constructor(private message: NzMessageService) {
   }
 }
diff --git a/components/message/index.ts b/components/message/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/message/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/message/nz-message.service.ts b/components/message/nz-message.service.ts
index b9d6ae56792..c834c977795 100644
--- a/components/message/nz-message.service.ts
+++ b/components/message/nz-message.service.ts
@@ -1,6 +1,6 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Injectable, TemplateRef, Type } from '@angular/core';
+import { Injectable, Type } from '@angular/core';
 
 import { NzMessageConfig } from './nz-message-config';
 import { NzMessageContainerComponent } from './nz-message-container.component';
diff --git a/components/message/public-api.ts b/components/message/public-api.ts
new file mode 100644
index 00000000000..356837d6cf7
--- /dev/null
+++ b/components/message/public-api.ts
@@ -0,0 +1,6 @@
+export * from './nz-message.service';
+export * from './nz-message.module';
+export * from './nz-message.component';
+export * from './nz-message.definitions';
+export * from './nz-message-container.component';
+export * from './nz-message-config';
diff --git a/components/modal/demo/async.ts b/components/modal/demo/async.ts
index ef332009f39..5e95a478eeb 100644
--- a/components/modal/demo/async.ts
+++ b/components/modal/demo/async.ts
@@ -4,10 +4,10 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-modal-async',
   template: `
     <button nz-button nzType="primary" (click)="showModal()">
-      <span>显示对话框</span>
+      <span>Show Modal</span>
     </button>
-    <nz-modal [(nzVisible)]="isVisible" nzTitle="对话框标题" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)" [nzOkLoading]="isOkLoading">
-      <p>对话框的内容</p>
+    <nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)" [nzOkLoading]="isOkLoading">
+      <p>Modal Content</p>
     </nz-modal>
   `,
   styles: []
diff --git a/components/modal/demo/footer.ts b/components/modal/demo/footer.ts
index c9dd076a1f2..83fd83b3f09 100644
--- a/components/modal/demo/footer.ts
+++ b/components/modal/demo/footer.ts
@@ -5,25 +5,25 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-modal-footer',
   template: `
     <button nz-button nzType="primary" (click)="showModal()">
-      <span>显示对话框</span>
+      <span>Show Modal</span>
     </button>
     <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
       <ng-template #modalTitle>
-        自定义对话框标题
+        Custom Modal Title
       </ng-template>
 
       <ng-template #modalContent>
-        <p>对话框的内容</p>
-        <p>对话框的内容</p>
-        <p>对话框的内容</p>
-        <p>对话框的内容</p>
-        <p>对话框的内容</p>
+        <p>Modal Content</p>
+        <p>Modal Content</p>
+        <p>Modal Content</p>
+        <p>Modal Content</p>
+        <p>Modal Content</p>
       </ng-template>
 
       <ng-template #modalFooter>
-        <span>自定义底部: </span>
-        <button nz-button nzType="default" (click)="handleCancel($event)">自定义返回</button>
-        <button nz-button nzType="primary" (click)="handleOk($event)" [nzLoading]="isConfirmLoading">自定义提交</button>
+        <span>Modal Footer: </span>
+        <button nz-button nzType="default" (click)="handleCancel($event)">Custom Callback</button>
+        <button nz-button nzType="primary" (click)="handleOk($event)" [nzLoading]="isConfirmLoading">Custom Submit</button>
       </ng-template>
     </nz-modal>
   `,
diff --git a/components/modal/demo/locale.ts b/components/modal/demo/locale.ts
index 5467f744e2a..311ddbbd700 100644
--- a/components/modal/demo/locale.ts
+++ b/components/modal/demo/locale.ts
@@ -9,8 +9,8 @@ import { NzModalService } from 'ng-zorro-antd';
       <nz-modal
         [(nzVisible)]="isVisible"
         nzTitle="Modal"
-        nzOkText="确认"
-        nzCancelText="取消"
+        nzOkText="Ok"
+        nzCancelText="Cancel"
         (nzOnOk)="handleOk()"
         (nzOnCancel)="handleCancel()"
       >
@@ -45,8 +45,8 @@ export class NzDemoModalLocaleComponent {
     this.modalService.confirm({
       nzTitle: 'Confirm',
       nzContent: 'Bla bla ...',
-      nzOkText: '确认',
-      nzCancelText: '取消'
+      nzOkText: 'OK',
+      nzCancelText: 'Cancel'
     });
   }
 }
diff --git a/components/modal/demo/position.ts b/components/modal/demo/position.ts
index 806ffe8b5c0..4501bc3c98b 100644
--- a/components/modal/demo/position.ts
+++ b/components/modal/demo/position.ts
@@ -3,20 +3,20 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-modal-position',
   template: `
-    <button nz-button nzType="primary" (click)="showModalTop()">显示距离顶部 20px 的对话框</button>
-    <nz-modal [nzStyle]="{ top: '20px' }" [(nzVisible)]="isVisibleTop" nzTitle="距离顶部 20px 的对话框" (nzOnCancel)="handleCancelTop()" (nzOnOk)="handleOkTop()">
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
+    <button nz-button nzType="primary" (click)="showModalTop()">Display a modal dialog at 20px to Top</button>
+    <nz-modal [nzStyle]="{ top: '20px' }" [(nzVisible)]="isVisibleTop" nzTitle="20px to Top" (nzOnCancel)="handleCancelTop()" (nzOnOk)="handleOkTop()">
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
     </nz-modal>
 
     <br/><br/>
 
-    <button nz-button nzType="primary" (click)="showModalMiddle()">显示垂直居中的对话框</button>
-    <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="垂直居中的对话框" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
+    <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
+    <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Vertically centered modal dialog" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
     </nz-modal>
   `,
   styles: [ `
@@ -53,7 +53,7 @@ export class NzDemoModalPositionComponent {
   }
 
   handleOkMiddle(): void {
-    console.log('点击了确定');
+    console.log('click ok');
     this.isVisibleMiddle = false;
   }
 
diff --git a/components/modal/demo/service.ts b/components/modal/demo/service.ts
index 760ddbc889d..af58d65ec34 100644
--- a/components/modal/demo/service.ts
+++ b/components/modal/demo/service.ts
@@ -7,33 +7,33 @@ import { ModalPublicAgent, NzModalService } from 'ng-zorro-antd';
   selector: 'nz-demo-modal-service',
   template: `
     <button nz-button nzType="primary" (click)="createModal()">
-      <span>使用文本</span>
+      <span>String</span>
     </button>
 
     <button nz-button nzType="primary" (click)="createTplModal(tplTitle, tplContent, tplFooter)">
-      <span>使用模板</span>
+      <span>Template</span>
     </button>
     <ng-template #tplTitle>
-      <span>对话框标题模板</span>
+      <span>Title Template</span>
     </ng-template>
     <ng-template #tplContent>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
-      <p>对话框的内容</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
+      <p>some contents...</p>
     </ng-template>
     <ng-template #tplFooter>
-      <button nz-button nzType="primary" [nzSize]="'large'" (click)="destroyTplModal()" [nzLoading]="tplModalButtonLoading">提交后关闭</button>
+      <button nz-button nzType="primary" (click)="destroyTplModal()" [nzLoading]="tplModalButtonLoading">Close after submit</button>
     </ng-template>
 
     <br /><br />
 
     <button nz-button nzType="primary" (click)="createComponentModal()">
-      <span>使用Component</span>
+      <span>Use Component</span>
     </button>
 
-    <button nz-button nzType="primary" (click)="createCustomButtonModal()">使用自定义按钮</button>
+    <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
   `
 })
 export class NzDemoModalServiceComponent {
@@ -44,8 +44,8 @@ export class NzDemoModalServiceComponent {
 
   createModal(): void {
     this.modalService.create({
-      nzTitle: '对话框标题',
-      nzContent: '纯文本内容，点确认 1 秒后关闭',
+      nzTitle: 'Modal Title',
+      nzContent: 'string, will close after 1 sec',
       nzClosable: false,
       nzOnOk: () => new Promise((resolve) => window.setTimeout(resolve, 1000))
     });
@@ -72,58 +72,58 @@ export class NzDemoModalServiceComponent {
 
   createComponentModal(): void {
     const modal = this.modalService.create({
-      nzTitle: '对话框标题',
+      nzTitle: 'Modal Title',
       nzContent: NzModalCustomComponent,
       nzComponentParams: {
-        title: '这是Component内部标题',
-        subtitle: '这是Component中的副标题，2秒后会被动态改变'
+        title: 'title in component',
+        subtitle: 'component sub title，will be changed after 2 sec'
       },
       nzFooter: [{
-        label: '从外部改变Component标题',
+        label: 'change component tilte from outside',
         onClick: (componentInstance: NzModalCustomComponent) => {
-          componentInstance.title = '内部Component标题被改变啦！！！！！！！！！';
+          componentInstance.title = 'title in inner component is changed';
         }
-      }],
+      }]
     });
 
-    // 从外部改变副标题（注：当对话框实例还未初始化完毕时，getContentComponentRef()将返回undefined）
+    // delay until modal instance created
     window.setTimeout(() => {
       const instance = modal.getContentComponentRef().instance as NzModalCustomComponent;
-      instance.subtitle = '副标题已改变！！！！！！！！';
+      instance.subtitle = 'sub title is changed';
     }, 2000);
   }
 
   createCustomButtonModal(): void {
     const modal = this.modalService.create({
-      nzTitle: '自定义按钮举例',
-      nzContent: '通过传入按钮配置数组到nzFooter，用于创建多个自定义按钮',
+      nzTitle: 'custom button demo',
+      nzContent: 'pass array of button config to nzFooter to create multiple buttons',
       nzFooter: [
         {
-          label: 'X',
-          shape: 'circle',
-          onClick: () => modal.destroy(),
+          label: 'Close',
+          shape: 'default',
+          onClick: () => modal.destroy()
         },
         {
-          label: '弹出确认框',
+          label: 'Confirm',
           type: 'primary',
-          onClick: () => this.modalService.confirm({ nzTitle: '确认框标题！', nzContent: '确认框描述' }),
+          onClick: () => this.modalService.confirm({ nzTitle: 'Confirm Modal Title', nzContent: 'Confirm Modal Content' })
         },
         {
-          label: '自动改变按钮状态',
+          label: 'Change Button Status',
           type: 'danger',
           loading: false,
-          onClick(): void { // 注：这里由于要得到this，所以不能用箭头函数
+          onClick(): void {
             this.loading = true;
             window.setTimeout(() => this.loading = false, 1000);
             window.setTimeout(() => {
               this.loading = false;
               this.disabled = true;
-              this.label = '不能点击了！';
+              this.label = 'can not be clicked！';
             }, 2000);
           }
         },
         {
-          label: '异步加载',
+          label: 'async load',
           type: 'dashed',
           onClick: () => new Promise(resolve => window.setTimeout(resolve, 2000))
         }
@@ -139,8 +139,8 @@ export class NzDemoModalServiceComponent {
       <h2>{{ title }}</h2>
       <h4>{{ subtitle }}</h4>
       <p>
-        <span>可以在弹出框中的Component内访问到模态框实例</span>
-        <button nz-button [nzType]="'primary'" (click)="destroyModal()">从内部销毁模态框</button>
+        <span>Get Modal instance in component</span>
+        <button nz-button [nzType]="'primary'" (click)="destroyModal()">destroy modal in the component</button>
       </p>
     </div>
   `
diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md
index 0d8a7152515..c228e4f98b7 100644
--- a/components/modal/doc/index.en-US.md
+++ b/components/modal/doc/index.en-US.md
@@ -30,7 +30,7 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 | nzOkLoading       | Whether to apply loading visual effect for OK button or not | boolean | false |
 | nzCancelLoading   | Whether to apply loading visual effect for Cancel button or not | boolean | false |
 | nzFooter          | Footer content, set as footer=null when you don't need default buttons. <i>1. Only valid in normal mode.<br>2. You can customize the buttons to the maximum extent by passing a `ModalButtonOptions` configuration (see the case or the instructions below).</i> | string<br>TemplateRef<br>ModalButtonOptions | OK and Cancel buttons |
-| nzGetContainer    | The mount node for Modal | HTMLElement / () => HTMLElement| document.body |
+| nzGetContainer    | The mount node for Modal | HTMLElement / () => HTMLElement| Handled by overlay container |
 | nzMask            | Whether show mask or not. | boolean | true |
 | nzMaskClosable    | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
 | nzMaskStyle       | Style for modal's mask element. | object | - |
diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md
index 00358ceefba..d47fbd485ff 100644
--- a/components/modal/doc/index.zh-CN.md
+++ b/components/modal/doc/index.zh-CN.md
@@ -30,7 +30,7 @@ title: Modal
 | nzOkLoading       | 确定按钮 loading | boolean | false |
 | nzCancelLoading   | 取消按钮 loading | boolean | false |
 | nzFooter          | 底部内容。<i>1. 仅在普通模式下有效。<br>2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮（详见案例或下方说明）。<br>3. 当不需要底部时，可以设为 null</i> | string<br>TemplateRef<br>ModalButtonOptions | 默认的确定取消按钮 |
-| nzGetContainer    | 指定 Modal 挂载的 HTML 节点 | HTMLElement<br>() => HTMLElement| document.body |
+| nzGetContainer    | 指定 Modal 挂载的 HTML 节点 | HTMLElement<br>() => HTMLElement| 默认在overlay容器中 |
 | nzMask            | 是否展示遮罩 | boolean | true |
 | nzMaskClosable    | 点击蒙层是否允许关闭 | boolean | true |
 | nzMaskStyle       | 遮罩样式 | object | 无 |
diff --git a/components/modal/nz-modal.component.html b/components/modal/nz-modal.component.html
index f6f2a2920f9..da04a591470 100644
--- a/components/modal/nz-modal.component.html
+++ b/components/modal/nz-modal.component.html
@@ -74,9 +74,13 @@
         >{{ button.label }}</button>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <button *ngIf="nzCancelText" nz-button (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading"><span>{{ nzCancelText }}</span></button>
-        <button *ngIf="nzOkText" nz-button [nzType]="nzOkType" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
-          <span>{{ nzOkText }}</span>
+        <button *ngIf="nzCancelText!==null" nz-button (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading">
+          <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
+          <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
+        </button>
+        <button *ngIf="nzOkText!==null" nz-button [nzType]="nzOkType" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
+          <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
+          <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
         </button>
       </ng-container>
     </ng-container>
@@ -107,9 +111,13 @@
         </div>
       </div>
       <div class="ant-confirm-btns">
-        <button *ngIf="nzCancelText" nz-button (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading"><span>{{ nzCancelText }}</span></button>
-        <button #autoFocusButtonOk *ngIf="nzOkText" nz-button [nzType]="nzOkType" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
-          <span>{{ nzOkText }}</span>
+        <button nz-button *ngIf="nzCancelText!==null" (click)="onClickOkCancel($event, 'cancel')" [nzLoading]="nzCancelLoading">
+          <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
+          <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
+        </button>
+        <button *ngIf="nzOkText!==null" #autoFocusButtonOk nz-button [nzType]="nzOkType" (click)="onClickOkCancel($event, 'ok')" [nzLoading]="nzOkLoading">
+          <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
+          <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
         </button>
       </div>
     </div> <!-- /.ant-confirm-body-wrapper -->
diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
index f6b3441d6b4..20965811575 100644
--- a/components/modal/nz-modal.component.ts
+++ b/components/modal/nz-modal.component.ts
@@ -1,3 +1,4 @@
+import { Overlay } from '@angular/cdk/overlay';
 import { DOCUMENT } from '@angular/common';
 import {
   AfterViewInit,
@@ -5,24 +6,23 @@ import {
   ComponentFactoryResolver,
   ComponentRef,
   ElementRef,
-  EmbeddedViewRef,
   EventEmitter,
   Inject,
-  InjectionToken,
   Injector,
   Input,
   OnChanges,
   OnInit,
   Output,
+  Renderer2,
   SimpleChanges,
   TemplateRef,
   Type,
   ViewChild,
-  ViewContainerRef,
-  ViewEncapsulation
+  ViewContainerRef
 } from '@angular/core';
 
-import { NzI18nService } from '../i18n';
+import { measureScrollbar } from '../core/util/mesure-scrollbar';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { ModalPublicAgent } from './modal-public-agent.class';
 import ModalUtil from './modal-util';
@@ -37,7 +37,7 @@ interface ClassMap {
 type AnimationState = 'enter' | 'leave' | null;
 
 @Component({
-  selector: 'nz-modal',
+  selector   : 'nz-modal',
   templateUrl: './nz-modal.component.html'
 })
 
@@ -46,7 +46,7 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
   @Input() nzContent: string | TemplateRef<{}> | Type<{}>; // [STATIC] If not specified, will use <ng-content>
   @Input() nzComponentParams: object; // [STATIC] ONLY avaliable when nzContent is a component
   @Input() nzFooter: string | TemplateRef<{}> | ModalButtonOptions[]; // [STATIC] Default Modal ONLY
-  @Input() nzGetContainer: HTMLElement | (() => HTMLElement) = this.document.body; // [STATIC]
+  @Input() nzGetContainer: HTMLElement | (() => HTMLElement); // [STATIC]
 
   @Input() nzVisible = false;
   @Output() nzVisibleChange = new EventEmitter<boolean>();
@@ -65,19 +65,21 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
   @Output() nzAfterClose = new EventEmitter<void>(); // Trigger when modal is hidden
 
   // --- Predefined OK & Cancel buttons
-  @Input() nzOkText: string = this.locale.translate('Modal.okText');
+  @Input() nzOkText: string;
   @Input() nzOkType = 'primary';
   @Input() nzOkLoading = false;
   @Input() @Output() nzOnOk: EventEmitter<MouseEvent> | OnClickCallback = new EventEmitter<MouseEvent>();
   @ViewChild('autoFocusButtonOk', { read: ElementRef }) autoFocusButtonOk: ElementRef; // Only aim to focus the ok button that needs to be auto focused
-  @Input() nzCancelText: string = this.locale.translate('Modal.cancelText');
+  @Input() nzCancelText: string;
   @Input() nzCancelLoading = false;
   @Input() @Output() nzOnCancel: EventEmitter<MouseEvent> | OnClickCallback = new EventEmitter<MouseEvent>();
 
   @ViewChild('modalContainer') modalContainer: ElementRef;
   @ViewChild('bodyContainer', { read: ViewContainerRef }) bodyContainer: ViewContainerRef;
 
-  get hidden(): boolean { return !this.nzVisible && !this.animationState; } // Indicate whether this dialog should hidden
+  get hidden(): boolean {
+    return !this.nzVisible && !this.animationState;
+  } // Indicate whether this dialog should hidden
   maskAnimationClassMap: object;
   modalAnimationClassMap: object;
   transformOrigin = '0px 0px 0px'; // The origin point that animation based on
@@ -85,12 +87,13 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
   private contentComponentRef: ComponentRef<{}>; // Handle the reference when using nzContent as Component
   private animationState: AnimationState; // Current animation state
 
-  constructor(
-    private locale: NzI18nService,
-    private cfr: ComponentFactoryResolver,
-    private elementRef: ElementRef,
-    private viewContainer: ViewContainerRef,
-    @Inject(DOCUMENT) private document: any // tslint:disable-line:no-any
+  constructor(private overlay: Overlay,
+              private locale: NzI18nService,
+              private renderer: Renderer2,
+              private cfr: ComponentFactoryResolver,
+              private elementRef: ElementRef,
+              private viewContainer: ViewContainerRef,
+              @Inject(DOCUMENT) private document: any // tslint:disable-line:no-any
   ) {
     super();
   }
@@ -107,6 +110,8 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
     const container = typeof this.nzGetContainer === 'function' ? this.nzGetContainer() : this.nzGetContainer;
     if (container instanceof HTMLElement) {
       container.appendChild(this.elementRef.nativeElement);
+    } else { // Use overlay to handle this modal by default
+      this.overlay.create().overlayElement.appendChild(this.elementRef.nativeElement);
     }
   }
 
@@ -184,7 +189,10 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
       const caseClose = (doClose: boolean | void | {}) => (doClose !== false) && this.close(); // Users can return "false" to prevent closing by default
       if (isPromise(result)) {
         this[ loadingKey ] = true;
-        const handleThen = (doClose) => { this[ loadingKey ] = false; caseClose(doClose); };
+        const handleThen = (doClose) => {
+          this[ loadingKey ] = false;
+          caseClose(doClose);
+        };
         (result as Promise<void>).then(handleThen).catch(handleThen);
       } else {
         caseClose(result);
@@ -210,9 +218,11 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
 
   // Lookup a button's property, if the prop is a function, call & then return the result, otherwise, return itself.
   private getButtonCallableProp(options: ModalButtonOptions, prop: string): {} {
-    const value = options[prop];
+    const value = options[ prop ];
     const args = [];
-    if (this.contentComponentRef) { args.push(this.contentComponentRef.instance); }
+    if (this.contentComponentRef) {
+      args.push(this.contentComponentRef.instance);
+    }
     return typeof value === 'function' ? value.apply(options, args) : value;
   }
 
@@ -241,12 +251,12 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
     this.animationState = state;
     if (state) {
       this.maskAnimationClassMap = {
-        [`fade-${state}`]: true,
-        [`fade-${state}-active`]: true
+        [ `fade-${state}` ]       : true,
+        [ `fade-${state}-active` ]: true
       };
       this.modalAnimationClassMap = {
-        [`zoom-${state}`]: true,
-        [`zoom-${state}-active`]: true
+        [ `zoom-${state}` ]       : true,
+        [ `zoom-${state}-active` ]: true
       };
     } else {
       this.maskAnimationClassMap = this.modalAnimationClassMap = null;
@@ -269,12 +279,12 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
     return buttons.map((button) => {
       const mixedButton = {
         ...{
-          type: 'default',
-          size: 'large',
+          type       : 'default',
+          size       : 'default',
           autoLoading: true,
-          show: true,
-          loading: false,
-          disabled: false
+          show       : true,
+          loading    : false,
+          disabled   : false
         },
         ...button
       };
@@ -291,7 +301,13 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
    */
   private createDynamicComponent(component: Type<{}>): void {
     const factory = this.cfr.resolveComponentFactory(component);
-    const childInjector = Injector.create([{ provide: ModalPublicAgent, useValue: this }], this.viewContainer.parentInjector);
+    const childInjector = Injector.create({
+      providers: [ {
+        provide : ModalPublicAgent,
+        useValue: this
+      } ],
+      parent   : this.viewContainer.parentInjector
+    });
     this.contentComponentRef = factory.create(childInjector);
     if (this.nzComponentParams) {
       Object.assign(this.contentComponentRef.instance, this.nzComponentParams);
@@ -312,9 +328,23 @@ export class NzModalComponent extends ModalPublicAgent implements OnInit, OnChan
     // }
   }
 
-  // TODO: We should detect if there are modals remained in this page, if 0 modals that we chould to remove overflow, otherwise, we should leave it 'hidden'.
   private changeBodyOverflow(visible: boolean): void {
-    this.document.body.style.overflow = visible ? 'hidden' : '';
+    const countKey = 'data-modal-count';
+    let countValue = parseInt(this.document.body.attributes.getNamedItem(countKey) && this.document.body.attributes.getNamedItem('data-modal-count').value || 0, 10);
+    if (visible) {
+      countValue += 1;
+    } else {
+      countValue = (countValue - 1 >= 0) ? (countValue - 1) : 0;
+    }
+    if (countValue) {
+      const scrollBarWidth = measureScrollbar();
+      this.renderer.setStyle(this.document.body, 'padding-right', `${scrollBarWidth}px`);
+      this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+    } else {
+      this.renderer.removeStyle(this.document.body, 'padding-right');
+      this.renderer.removeStyle(this.document.body, 'overflow');
+    }
+    this.renderer.setAttribute(this.document.body, countKey, `${countValue}`);
   }
 }
 
diff --git a/components/modal/nz-modal.module.ts b/components/modal/nz-modal.module.ts
index 6784e570765..d7164eb7497 100644
--- a/components/modal/nz-modal.module.ts
+++ b/components/modal/nz-modal.module.ts
@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 
 import { NzButtonModule } from '../button/nz-button.module';
 import { LoggerModule } from '../core/util/logger/logger.module';
-import { NzI18nModule } from '../i18n';
+import { NzI18nModule } from '../i18n/nz-i18n.module';
 
 import { CssUnitPipe } from './css-unit.pipe';
 import { NzModalComponent } from './nz-modal.component';
diff --git a/components/modal/nz-modal.service.ts b/components/modal/nz-modal.service.ts
index f837c79975a..b6ef8069af7 100644
--- a/components/modal/nz-modal.service.ts
+++ b/components/modal/nz-modal.service.ts
@@ -16,7 +16,7 @@ export class ModalBuilderForService {
   constructor(private overlay: Overlay, options: ModalOptionsForService = {}) {
       this.createModal();
 
-      if (!('nzGetContainer' in options)) { // As we use CDK to create modal in service, there is no need to append DOM to body by default
+      if (!('nzGetContainer' in options)) { // As we use CDK to create modal in service by force, there is no need to use nzGetContainer
         options.nzGetContainer = null;
       }
 
diff --git a/components/ng-zorro.less b/components/ng-zorro-antd.less
similarity index 100%
rename from components/ng-zorro.less
rename to components/ng-zorro-antd.less
diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
index 6fde9a5715c..3c46719cc39 100644
--- a/components/ng-zorro-antd.module.ts
+++ b/components/ng-zorro-antd.module.ts
@@ -2,13 +2,16 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { NzAffixModule } from './affix/nz-affix.module';
 import { NzAlertModule } from './alert/nz-alert.module';
 import { NzAnchorModule } from './anchor/nz-anchor.module';
+import { NzAutocompleteModule } from './auto-complete/nz-autocomplete.module';
 import { NzAvatarModule } from './avatar/nz-avatar.module';
+import { NzBackTopModule } from './back-top/nz-back-top.module';
 import { NzBadgeModule } from './badge/nz-badge.module';
 import { NzBreadCrumbModule } from './breadcrumb/nz-breadcrumb.module';
 import { NzButtonModule } from './button/nz-button.module';
 import { NzCalendarModule } from './calendar/nz-calendar.module';
 import { NzCardModule } from './card/nz-card.module';
 import { NzCarouselModule } from './carousel/nz-carousel.module';
+import { NzCascaderModule } from './cascader/nz-cascader.module';
 import { NzCheckboxModule } from './checkbox/nz-checkbox.module';
 import { NzCollapseModule } from './collapse/nz-collapse.module';
 import { NzDividerModule } from './divider/nz-divider.module';
@@ -22,11 +25,19 @@ import { NzInputModule } from './input/nz-input.module';
 import { NzLayoutModule } from './layout/nz-layout.module';
 import { NzListModule } from './list/nz-list.module';
 import { NzMenuModule } from './menu/nz-menu.module';
+import { NzMessageModule } from './message/nz-message.module';
+import { NzMessageService } from './message/nz-message.service';
+import { NzModalModule } from './modal/nz-modal.module';
+import { NzNotificationModule } from './notification/nz-notification.module';
+import { NzNotificationService } from './notification/nz-notification.service';
 import { NzPaginationModule } from './pagination/nz-pagination.module';
+import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
+import { NzPopoverModule } from './popover/nz-popover.module';
 import { NzProgressModule } from './progress/nz-progress.module';
 import { NzRadioModule } from './radio/nz-radio.module';
 import { NzRateModule } from './rate/nz-rate.module';
 import { NzSelectModule } from './select/nz-select.module';
+import { NzSliderModule } from './slider/nz-slider.module';
 import { NzSpinModule } from './spin/nz-spin.module';
 import { NzStepsModule } from './steps/nz-steps.module';
 import { NzSwitchModule } from './switch/nz-switch.module';
@@ -34,23 +45,10 @@ import { NzTableModule } from './table/nz-table.module';
 import { NzTabsModule } from './tabs/nz-tabs.module';
 import { NzTagModule } from './tag/nz-tag.module';
 import { NzTimelineModule } from './timeline/nz-timeline.module';
+import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 import { NzUploadModule } from './upload/nz-upload.module';
 
-// unfinished
-import { NzMessageModule } from './message/nz-message.module';
-import { NzMessageService } from './message/nz-message.service';
-import { NzNotificationModule } from './notification/nz-notification.module';
-import { NzNotificationService } from './notification/nz-notification.service';
-import { NzPopoverModule } from './popover/nz-popover.module';
-import { NzSliderModule } from './slider/nz-slider.module';
-import { NzToolTipModule } from './tooltip/nz-tooltip.module';
-
-// error
-// import { NzPopconfirmModule } from './popconfirm/nz-popconfirm.module';
-// import { NzModalModule } from './modal/nz-modal.module';
-// import { NzLocaleModule } from './locale/nz-locale.module';
-
 export * from './affix';
 export * from './alert';
 export * from './anchor';
@@ -88,16 +86,15 @@ export * from './timeline';
 export * from './transfer';
 export * from './upload';
 export * from './tag';
-
-// export * from './message';
-// export * from './tooltip';
-// export * from './slider';
-// export * from './popover';
-// export * from './notification';
-
-// export * from './popconfirm';
-// export * from './modal';
-// export * from './locale';
+export * from './auto-complete';
+export * from './message';
+export * from './tooltip';
+export * from './slider';
+export * from './popover';
+export * from './notification';
+export * from './popconfirm';
+export * from './modal';
+export * from './cascader';
 
 @NgModule({
   exports: [
@@ -137,16 +134,16 @@ export * from './tag';
     NzListModule,
     NzI18nModule,
     NzUploadModule,
-    // unfinished
+    NzAutocompleteModule,
+    NzTagModule,
     NzMessageModule,
     NzNotificationModule,
     NzPopoverModule,
-    NzTagModule,
-    NzToolTipModule
-    // error
-    // NzPopconfirmModule,
-    // NzModalModule,
-    // NzLocaleModule,
+    NzToolTipModule,
+    NzPopconfirmModule,
+    NzModalModule,
+    NzBackTopModule,
+    NzCascaderModule
   ]
 })
 export class NgZorroAntdModule {
diff --git a/components/notification/demo/basic.ts b/components/notification/demo/basic.ts
index 441a8e2ac12..9cb28c1f100 100644
--- a/components/notification/demo/basic.ts
+++ b/components/notification/demo/basic.ts
@@ -10,10 +10,10 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationBasicComponent {
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 
   createBasicNotification(): void {
-    this._notification.blank( 'Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.');
+    this.notification.blank( 'Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.');
   }
 }
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index 53ca90783a5..27afd4ac40a 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -11,4 +11,4 @@ title:
 
 ## en-US
 
-The icon can be customized to any react node.
+The icon can be customized to any `TemplateRef<void>`.
diff --git a/components/notification/demo/custom-icon.ts b/components/notification/demo/custom-icon.ts
index 8931e847475..49a2fbf0193 100644
--- a/components/notification/demo/custom-icon.ts
+++ b/components/notification/demo/custom-icon.ts
@@ -21,10 +21,10 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationCustomIconComponent {
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 
   createBasicNotification(template: TemplateRef<{}>): void {
-    this._notification.template(template);
+    this.notification.template(template);
   }
 }
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
index caa41bb1526..8bea1fd1b9f 100644
--- a/components/notification/demo/custom-style.md
+++ b/components/notification/demo/custom-style.md
@@ -7,10 +7,10 @@ title:
 
 ## zh-CN
 
-使用 style 和 className 来定义样式。
+使用 nzStyle 和 nzClass 来定义样式。
 
 ## en-US
 
-The style and className are available to customize Notification.
+The nzStyle and nzClass are available to customize Notification.
 
 
diff --git a/components/notification/demo/custom-style.ts b/components/notification/demo/custom-style.ts
index 88f9f8e2662..7e2bbe983bf 100644
--- a/components/notification/demo/custom-style.ts
+++ b/components/notification/demo/custom-style.ts
@@ -1,4 +1,4 @@
-import { Component, TemplateRef } from '@angular/core';
+import { Component } from '@angular/core';
 import { NzNotificationService } from 'ng-zorro-antd';
 
 @Component({
@@ -10,16 +10,16 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationCustomStyleComponent {
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 
   createBasicNotification(): void {
-    this._notification.blank('Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', {
-      nzStyle   : {
+    this.notification.blank('Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.', {
+      nzStyle: {
         width     : '600px',
         marginLeft: '-265px'
       },
-      nzClass   : 'test-class'
+      nzClass: 'test-class'
     });
   }
 }
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 1c1f64a5dce..2a7256a2d2d 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-`Duration` can be used to specify how long the notification stays open. After the duration time elapses,
+`nzDuration` can be used to specify how long the notification stays open. After the duration time elapses,
 the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0,
 the notification box will never close automatically.
 
diff --git a/components/notification/demo/duration.ts b/components/notification/demo/duration.ts
index e8bb5328cce..0e64cc7578c 100644
--- a/components/notification/demo/duration.ts
+++ b/components/notification/demo/duration.ts
@@ -10,9 +10,9 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationDurationComponent {
   createBasicNotification(): void {
-    this._notification.blank('Notification Title', 'I will never close automatically. I will be close automatically. I will never close automatically.', { nzDuration: 0 });
+    this.notification.blank('Notification Title', 'I will never close automatically. I will be close automatically. I will never close automatically.', { nzDuration: 0 });
   }
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 }
diff --git a/components/notification/demo/placement.ts b/components/notification/demo/placement.ts
index a083c8e354c..0897d6bb865 100644
--- a/components/notification/demo/placement.ts
+++ b/components/notification/demo/placement.ts
@@ -4,7 +4,7 @@ import { NzNotificationService } from 'ng-zorro-antd';
 @Component({
   selector: 'nz-demo-notification-placement',
   template: `
-    <nz-select [(ngModel)]="placement" style="width: 120px; margin-right: 10px;">
+    <nz-select [(ngModel)]="placement" style="width: 120px; margin-right: 10px;" (ngModelChange)="clearBeforeNotifications()">
       <nz-option nzValue="topLeft" nzLabel="topLeft"></nz-option>
       <nz-option nzValue="topRight" nzLabel="topRight"></nz-option>
       <nz-option nzValue="bottomLeft" nzLabel="bottomLeft"></nz-option>
@@ -17,13 +17,17 @@ import { NzNotificationService } from 'ng-zorro-antd';
 export class NzDemoNotificationPlacementComponent {
   placement = 'topRight';
 
-  constructor(private _notification: NzNotificationService) {
+  clearBeforeNotifications(): void {
+    this.notification.remove();
   }
 
   createBasicNotification(): void {
-    this._notification.config({
+    this.notification.config({
       nzPlacement: this.placement
     });
-    this._notification.blank('Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.');
+    this.notification.blank('Notification Title', 'This is the content of the notification. This is the content of the notification. This is the content of the notification.');
+  }
+
+  constructor(private notification: NzNotificationService) {
   }
 }
diff --git a/components/notification/demo/with-btn.ts b/components/notification/demo/with-btn.ts
index a63011725a1..5d2533ce4b9 100644
--- a/components/notification/demo/with-btn.ts
+++ b/components/notification/demo/with-btn.ts
@@ -23,10 +23,10 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationWithBtnComponent {
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 
   createBasicNotification(template: TemplateRef<{}>): void {
-    this._notification.template(template);
+    this.notification.template(template);
   }
 }
diff --git a/components/notification/demo/with-icon.ts b/components/notification/demo/with-icon.ts
index d467242cb4d..fa5e89e1b75 100644
--- a/components/notification/demo/with-icon.ts
+++ b/components/notification/demo/with-icon.ts
@@ -19,10 +19,10 @@ import { NzNotificationService } from 'ng-zorro-antd';
 })
 export class NzDemoNotificationWithIconComponent {
   createNotification(type: string): void {
-    this._notification.create(type, 'Notification Title',
+    this.notification.create(type, 'Notification Title',
       'This is the content of the notification. This is the content of the notification. This is the content of the notification.');
   }
 
-  constructor(private _notification: NzNotificationService) {
+  constructor(private notification: NzNotificationService) {
   }
 }
diff --git a/components/notification/doc/index.en-US.md b/components/notification/doc/index.en-US.md
index f1da0bb4476..6533b8755d4 100644
--- a/components/notification/doc/index.en-US.md
+++ b/components/notification/doc/index.en-US.md
@@ -20,7 +20,7 @@ used in the following cases:
 ## How To Use
 
 Similar to `NzMessage`, if you want to modify the global default configuration, you can modify the value of provider `NZ_NOTIFICATION_CONFIG`.
-(Example: Add `{ provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }}` to `providers` of your module, `NZ_MESSAGE_CONFIG` can be imported from `ng-zorro-antd`)
+(Example: Add `{ provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }}` to `providers` of your module, `NZ_NOTIFICATION_CONFIG` can be imported from `ng-zorro-antd`)
 
 The default global configuration is:
 ```js
diff --git a/components/notification/doc/index.zh-CN.md b/components/notification/doc/index.zh-CN.md
index 3e5b8fb3193..4b04e6b1328 100644
--- a/components/notification/doc/index.zh-CN.md
+++ b/components/notification/doc/index.zh-CN.md
@@ -19,7 +19,7 @@ subtitle: 通知提醒框
 ## 如何使用
 
 与`NzMessage`类似，如果要修改全局默认配置，你可以设置提供商 `NZ_NOTIFICATION_CONFIG` 的值来修改。
-（如：在你的模块的`providers`中加入 `{ provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }}`，`NZ_MESSAGE_CONFIG` 可以从 `ng-zorro-antd` 中导入）
+（如：在你的模块的`providers`中加入 `{ provide: NZ_NOTIFICATION_CONFIG, useValue: { nzDuration: 3000 }}`，`NZ_NOTIFICATION_CONFIG` 可以从 `ng-zorro-antd` 中导入）
 
 默认全局配置为：
 ```js
diff --git a/components/notification/index.ts b/components/notification/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/notification/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/notification/public-api.ts b/components/notification/public-api.ts
new file mode 100644
index 00000000000..f25fd4955df
--- /dev/null
+++ b/components/notification/public-api.ts
@@ -0,0 +1,6 @@
+export * from './nz-notification-config';
+export * from './nz-notification.component';
+export * from './nz-notification.module';
+export * from './nz-notification.definitions';
+export * from './nz-notification.service';
+export * from './nz-notification-container.component';
diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md
index dc460bd0547..d281d1cf9b0 100644
--- a/components/popconfirm/doc/index.en-US.md
+++ b/components/popconfirm/doc/index.en-US.md
@@ -19,7 +19,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 | nzCancelText | text of the Cancel button | string | `Cancel` |
 | nzOkText | text of the Confirm button | string | `Confirm` |
 | nzOkType | Button `type` of the Confirm button | string | `primary` |
-| nzTitle | title of the confirmation box | string | ReactNode | - |
+| nzTitle | title of the confirmation box | string丨`TemplateRef<void>` | - |
 | nzOnCancel | callback of cancel | EventEmitter | - |
 | nzOnConfirm | callback of confirmation | EventEmitter | - |
 | nzCondition | Whether to directly emit `onConfirm` without showing Popconfirm | boolean | false |
diff --git a/components/popconfirm/doc/index.zh-CN.md b/components/popconfirm/doc/index.zh-CN.md
index 9aed807e022..f4af3bb0abb 100644
--- a/components/popconfirm/doc/index.zh-CN.md
+++ b/components/popconfirm/doc/index.zh-CN.md
@@ -20,7 +20,7 @@ title: Popconfirm
 | nzCancelText | 取消按钮文字 | string | 取消 |
 | nzOkText | 确认按钮文字 | string | 确定 |
 | nzOkType | 确认按钮类型 | string | primary |
-| nzTitle | 确认框的描述 | string | ReactNode | 无 |
+| nzTitle | 确认框的描述 | string 丨`TemplateRef<void>` | 无 |
 | nzOnCancel | 点击取消的回调 | EventEmitter | 无 |
 | nzOnConfirm | 点击确认的回调 | EventEmitter | 无 |
 | nzCondition | 是否直接触发 `nzOnConfirm` 而不弹出框 | boolean | false |
diff --git a/components/popconfirm/index.ts b/components/popconfirm/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/popconfirm/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html
index b840b5f4f1a..91da55e2f39 100644
--- a/components/popconfirm/nz-popconfirm.component.html
+++ b/components/popconfirm/nz-popconfirm.component.html
@@ -21,14 +21,16 @@
               <div class="ant-popover-message-title">{{ nzTitle }}</div>
             </div>
             <div class="ant-popover-buttons" *ngIf="!nzTemplate">
-              <button nz-button [nzSize]="'small'" (click)="onCancel()"><span>{{ nzCancelText }}</span></button>
+              <button nz-button [nzSize]="'small'" (click)="onCancel()">
+                <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
+                <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
+              </button>
               <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="onConfirm()">
-                <span>{{ nzOkText }}</span></button>
+                <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
+                <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
+              </button>
             </div>
-            <ng-template
-              *ngIf="nzTemplate"
-              [ngTemplateOutlet]="nzTemplate">
-            </ng-template>
+            <ng-template *ngIf="nzTemplate" [ngTemplateOutlet]="nzTemplate"></ng-template>
           </div>
         </div>
       </div>
diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
index f2622676ba8..17a992b40ae 100644
--- a/components/popconfirm/nz-popconfirm.component.ts
+++ b/components/popconfirm/nz-popconfirm.component.ts
@@ -8,16 +8,18 @@ import {
 
 import { fadeAnimation } from '../core/animation/fade-animations';
 import { toBoolean } from '../core/util/convert';
-import { NzI18nService } from '../i18n';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
 
 @Component({
-  selector: 'nz-popconfirm',
+  selector           : 'nz-popconfirm',
   preserveWhitespaces: false,
-  animations: [ fadeAnimation ],
-  templateUrl: './nz-popconfirm.component.html',
-  styles: [ `
-    .ant-popover { position: relative; }
+  animations         : [ fadeAnimation ],
+  templateUrl        : './nz-popconfirm.component.html',
+  styles             : [ `
+    .ant-popover {
+      position: relative;
+    }
   ` ]
 })
 export class NzPopconfirmComponent extends NzToolTipComponent {
@@ -26,8 +28,8 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
   _trigger = 'click';
   _hasBackdrop = true;
   @Input() nzContent;
-  @Input() nzOkText = this._locale.translate('Modal.okText');
-  @Input() nzCancelText = this._locale.translate('Modal.cancelText');
+  @Input() nzOkText: string;
+  @Input() nzCancelText: string;
 
   @Input()
   set nzCondition(value: boolean) {
diff --git a/components/popconfirm/nz-popconfirm.module.ts b/components/popconfirm/nz-popconfirm.module.ts
index 5224f093b57..1216873908b 100644
--- a/components/popconfirm/nz-popconfirm.module.ts
+++ b/components/popconfirm/nz-popconfirm.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzButtonModule } from '../button/nz-button.module';
-import { NzI18nModule } from '../i18n';
+import { NzI18nModule } from '../i18n/nz-i18n.module';
 
 import { NzPopconfirmComponent } from './nz-popconfirm.component';
 import { NzPopconfirmDirective } from './nz-popconfirm.directive';
diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
index 586f7639dce..4d4e4624a3b 100644
--- a/components/popconfirm/nz-popconfirm.spec.ts
+++ b/components/popconfirm/nz-popconfirm.spec.ts
@@ -45,6 +45,9 @@ describe('NzPopconfirm', () => {
     // Move inside to trigger tooltip shown up
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 100ms delay
+    demoAppFixture.detectChanges();
+    tick();
     expect(overlayContainerElement.textContent).toContain(featureKey);
 
     // Move out from the trigger element to hide it
@@ -55,13 +58,16 @@ describe('NzPopconfirm', () => {
     expect(overlayContainerElement.textContent).not.toContain(featureKey);
   }));
 
-  it('should show tooltip with custom template', () => {
+  it('should show tooltip with custom template', fakeAsync(() => {
     const triggerElement = demoAppComponent.templateTrigger.nativeElement;
 
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 100ms delay
+    demoAppFixture.detectChanges();
+    tick();
     expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
-  });
+  }));
 
   it('should show/hide tooltip by focus', fakeAsync(() => {
     const featureKey = 'FOCUS';
diff --git a/components/popconfirm/public-api.ts b/components/popconfirm/public-api.ts
new file mode 100644
index 00000000000..2897757bb9f
--- /dev/null
+++ b/components/popconfirm/public-api.ts
@@ -0,0 +1,3 @@
+export * from './nz-popconfirm.component';
+export * from './nz-popconfirm.directive';
+export * from './nz-popconfirm.module';
diff --git a/components/popover/doc/index.en-US.md b/components/popover/doc/index.en-US.md
index 0091caa79dc..9dd8763f8ff 100644
--- a/components/popover/doc/index.en-US.md
+++ b/components/popover/doc/index.en-US.md
@@ -16,8 +16,8 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
-| nzTitle | Title of the card | string | ReactNode | - |
-| nzTemplate | Used to define the content (will not override the nzTitle) | ng-template | - |
+| nzTitle | Title of the card | string 丨`TemplateRef<void>` | - |
+| nzTemplate | Used to define the content (will not override the nzTitle) | `TemplateRef<void>` | - |
 
 Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
 
diff --git a/components/popover/doc/index.zh-CN.md b/components/popover/doc/index.zh-CN.md
index 20770482e54..1c9a3f0dcbc 100644
--- a/components/popover/doc/index.zh-CN.md
+++ b/components/popover/doc/index.zh-CN.md
@@ -17,8 +17,8 @@ title: Popover
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| nzTitle | 卡片标题 | string | ReactNode | 无 |
-| nzTemplate | 用于定义Content内容（不会覆盖nzTitle） | ng-template | 无 |
+| nzTitle | 卡片标题 | string 丨`TemplateRef<void>` | 无 |
+| nzTemplate | 用于定义Content内容（不会覆盖nzTitle） | `TemplateRef<void>` | 无 |
 
 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。
 
diff --git a/components/popover/index.ts b/components/popover/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/popover/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/popover/nz-popover.spec.ts b/components/popover/nz-popover.spec.ts
index ffd8afdf5ca..1fc414accf0 100644
--- a/components/popover/nz-popover.spec.ts
+++ b/components/popover/nz-popover.spec.ts
@@ -45,6 +45,10 @@ describe('NzPopover', () => {
     // Move inside to trigger tooltip shown up
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 100ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    demoAppFixture.detectChanges();
     expect(overlayContainerElement.textContent).toContain(featureKey);
 
     // Move out from the trigger element to hide it
@@ -55,13 +59,17 @@ describe('NzPopover', () => {
     expect(overlayContainerElement.textContent).not.toContain(featureKey);
   }));
 
-  it('should show tooltip with custom template', () => {
+  it('should show tooltip with custom template', fakeAsync(() => {
     const triggerElement = demoAppComponent.templateTrigger.nativeElement;
 
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 100ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    demoAppFixture.detectChanges();
     expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
-  });
+  }));
 
   it('should show/hide tooltip by focus', fakeAsync(() => {
     const featureKey = 'FOCUS';
diff --git a/components/popover/public-api.ts b/components/popover/public-api.ts
new file mode 100644
index 00000000000..b2af57e1780
--- /dev/null
+++ b/components/popover/public-api.ts
@@ -0,0 +1,3 @@
+export * from './nz-popover.component';
+export * from './nz-popover.directive';
+export * from './nz-popover.module';
diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md
index 5f7ed275e82..4bbdeaf0064 100644
--- a/components/select/doc/index.en-US.md
+++ b/components/select/doc/index.en-US.md
@@ -39,7 +39,7 @@ Select component to select value from options.
 | nzMaxMultipleCount |  Max selected option can be selected | number | Infinity |
 | nzMode | Set mode of Select | 'multiple' 丨 'tags' 丨 'default' | 'default' |
 | nzNotFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
-| nzPlaceholder | Placeholder of select | string丨ReactNode | - |
+| nzPlaceholder | Placeholder of select | string丨`TemplateRef<void>` | - |
 | nzShowSearch | Whether show search input in single mode. | boolean | false |
 | nzSize | Size of Select input. `default` `large` `small` | string | default |
 | nzScrollToBottom | Called when dropdown scrolls to bottom | ()=>{} | - |
diff --git a/components/select/nz-select.component.ts b/components/select/nz-select.component.ts
index 6c343c50067..45002b07539 100644
--- a/components/select/nz-select.component.ts
+++ b/components/select/nz-select.component.ts
@@ -247,6 +247,9 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterVie
       if (this.nzOptionContainerComponent) {
         this.nzOptionContainerComponent.scrollIntoView();
       }
+      if (this.cdkConnectedOverlay && this.cdkConnectedOverlay.overlayRef) {
+        this.cdkConnectedOverlay.overlayRef.updatePosition();
+      }
     } else {
       if (this.nzSelectTopControlComponent) {
         this.nzSelectTopControlComponent.setInputValue('', false);
diff --git a/components/slider/index.ts b/components/slider/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/slider/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/slider/public-api.ts b/components/slider/public-api.ts
new file mode 100644
index 00000000000..d24e18947a1
--- /dev/null
+++ b/components/slider/public-api.ts
@@ -0,0 +1,7 @@
+export * from './nz-slider.component';
+export * from './nz-slider.module';
+export * from './nz-slider.service';
+export * from './nz-slider-handle.component';
+export * from './nz-slider-marks.component';
+export * from './nz-slider-step.component';
+export * from './nz-slider-track.component';
diff --git a/components/style/core/base.less b/components/style/core/base.less
index c743c7cd09c..4e0525cf475 100644
--- a/components/style/core/base.less
+++ b/components/style/core/base.less
@@ -56,9 +56,9 @@ html {
 }
 
 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
-@at-root {
-  @-ms-viewport { width: device-width; }
-}
+//@at-root {
+//  @-ms-viewport { width: device-width; }
+//}
 
 // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
diff --git a/components/tooltip/doc/index.en-US.md b/components/tooltip/doc/index.en-US.md
index 634b5f9eaf4..05e27aba216 100644
--- a/components/tooltip/doc/index.en-US.md
+++ b/components/tooltip/doc/index.en-US.md
@@ -31,7 +31,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | nzTrigger | Tooltip trigger mode | `hover`  |  `focus`  |  `click` | `hover` |
 | nzVisible | Whether the floating tooltip card is visible or not | boolean | `false` |
 | nzVisibleChange | Callback executed when visibility of the tooltip card is changed | EventEmitter | - |
-| nzTemplate | Tooltip content, the content of nzTitle will be overwritten after setting (see usage example) | ng-template | - |
+| nzTemplate | Tooltip content, the content of nzTitle will be overwritten after setting (see usage example) | `TemplateRef<void>` | - |
 
 ## Note
 
diff --git a/components/tooltip/doc/index.zh-CN.md b/components/tooltip/doc/index.zh-CN.md
index 50191808b48..05409dbe521 100644
--- a/components/tooltip/doc/index.zh-CN.md
+++ b/components/tooltip/doc/index.zh-CN.md
@@ -25,15 +25,15 @@ title: Tooltip
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| nzMouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
+| nzMouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.15 |
 | nzMouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
 | nzOverlayClassName | 卡片类名 | string | 无 |
 | nzOverlayStyle | 卡片样式 | object | 无 |
-| nzPlacement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
+| nzPlacement | 气泡框位置，可选 `top ｜left ｜right ｜bottom ｜topLeft ｜topRight ｜bottomLeft ｜bottomRight ｜leftTop ｜leftBottom ｜rightTop ｜rightBottom` | string | top |
 | nzTrigger | 触发行为，可选 `hover/focus/click` | string | hover |
 | nzVisible | 用于手动控制浮层显隐 | boolean | false |
 | nzVisibleChange | 显示隐藏的回调 | EventEmitter | 无 |
-| nzTemplate | 气泡内容，设置后会覆盖掉nzTitle的内容（用法见示例） | ng-template | 无 |
+| nzTemplate | 气泡内容，设置后会覆盖掉nzTitle的内容（用法见示例） | `TemplateRef<void>` | 无 |
 
 ## 注意
 
diff --git a/components/tooltip/index.ts b/components/tooltip/index.ts
new file mode 100644
index 00000000000..7e1a213e3ea
--- /dev/null
+++ b/components/tooltip/index.ts
@@ -0,0 +1 @@
+export * from './public-api';
diff --git a/components/tooltip/nz-tooltip.component.ts b/components/tooltip/nz-tooltip.component.ts
index 3bc4fa7f567..90e78d8bd2e 100644
--- a/components/tooltip/nz-tooltip.component.ts
+++ b/components/tooltip/nz-tooltip.component.ts
@@ -41,7 +41,7 @@ export class NzToolTipComponent {
 
   @Input() nzOverlayClassName = '';
   @Input() nzOverlayStyle = {};
-  @Input() nzMouseEnterDelay = 0; // Unit: second
+  @Input() nzMouseEnterDelay = 0.15; // Unit: second
   @Input() nzMouseLeaveDelay = 0.1; // Unit: second
   @Output() nzVisibleChange: EventEmitter<boolean> = new EventEmitter();
   @ContentChild('nzTemplate') nzTemplate: TemplateRef<void>;
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
index 31b8350b7b5..18f0e979bed 100644
--- a/components/tooltip/nz-tooltip.spec.ts
+++ b/components/tooltip/nz-tooltip.spec.ts
@@ -48,6 +48,10 @@ describe('NzTooltip', () => {
     // Move inside to trigger tooltip shown up
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 150ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    demoAppFixture.detectChanges();
     expect(overlayContainerElement.textContent).toContain(featureKey);
 
     // NOTE: the overlayElement is only available after tooltip shown up
@@ -74,10 +78,14 @@ describe('NzTooltip', () => {
     const triggerElement = demoAppComponent.normalTrigger.nativeElement;
 
     expect(overlayContainerElement.textContent).not.toContain(featureKey);
-
+    demoAppFixture.detectChanges();
     // Move inside to trigger tooltip shown up
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 150ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    demoAppFixture.detectChanges();
     expect(overlayContainerElement.textContent).toContain(featureKey);
 
     // Move out from the trigger element to hide it
@@ -88,13 +96,17 @@ describe('NzTooltip', () => {
     expect(overlayContainerElement.textContent).not.toContain(featureKey);
   }));
 
-  it('should show tooltip with custom template', () => {
+  it('should show tooltip with custom template', fakeAsync(() => {
     const triggerElement = demoAppComponent.templateTrigger.nativeElement;
 
     dispatchMouseEvent(triggerElement, 'mouseenter');
     demoAppFixture.detectChanges();
+    tick(150); // wait for the default 150ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    demoAppFixture.detectChanges();
     expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
-  });
+  }));
 
   it('should show/hide tooltip by focus', fakeAsync(() => {
     const featureKey = 'FOCUS';
diff --git a/components/tooltip/public-api.ts b/components/tooltip/public-api.ts
new file mode 100644
index 00000000000..b3d1bd43e13
--- /dev/null
+++ b/components/tooltip/public-api.ts
@@ -0,0 +1,3 @@
+export * from './nz-tooltip.component';
+export * from './nz-tooltip.directive';
+export * from './nz-tooltip.module';
diff --git a/docs/changelog.en-US.md b/docs/changelog.en-US.md
index 257c7bf1d5b..09c2e65daf4 100755
--- a/docs/changelog.en-US.md
+++ b/docs/changelog.en-US.md
@@ -1,12 +1,9 @@
 ---
-order: 3
+order: 9
 title: Change Log
 toc: false
 timeline: true
 ---
-
-`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
-
 #### Release Schedule
 
 * Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
@@ -15,226 +12,4 @@ timeline: true
 
 ---
 
-
-## 3.0.2
-
-`2017-12-17`
-
-- 📝 Provide a migration helper for antd@3.0. [e71b68dd](https://github.com/ant-design/ant-design/commit/e71b68dd1d2ff91200fea6dd9d56e6aa5653edbc)
-- 📝 Rewrite [CONTRIBUTING Guideline](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)
-- 🌟 Optimize notification display in small screen. [#8631](https://github.com/ant-design/ant-design/issues/8631)
-- 🌟 Optimize Pagination design and fix some issues of alignment and margin.
-- 🐞 Upgrade to `react-slick@0.16.0` for peerDependencies warning. [#8455](https://github.com/ant-design/ant-design/issues/8455)
-- 🐞 Fix not working `size` property in fixed-header Table. [#8577](https://github.com/ant-design/ant-design/issues/8577)
-- 🐞 Fix not working `locale` property of DatePicker/RangePicker. [#8635](https://github.com/ant-design/ant-design/issues/8635)
-- 🐞 Fix Popover arrow position and size cannot be overrided by less variable. [#8548](https://github.com/ant-design/ant-design/issues/8548) [#8549](https://github.com/ant-design/ant-design/issues/8549)
-- 🐞 Fix not working `notFoundContent` of AutoComponent. [#8553](https://github.com/ant-design/ant-design/issues/8553)
-- 🐞 Tweak RangePicker vertical align position.
-- 🐞 Layout.Sider breakpoints is same as Grid's now. [#8620](https://github.com/ant-design/ant-design/issues/8620)
-- 🐞 Fix submenu still showing in a collapsed menu when collapsedWidth is `0`. [#8587](https://github.com/ant-design/ant-design/issues/8587)
-- 🐞 Fix Card's `Meta.title` text overflow not working. [#8597](https://github.com/ant-design/ant-design/issues/8597)
-- 🐞 Fix pagination margin problem of bordered List. [#8562](https://github.com/ant-design/ant-design/issues/8562)
-- 🐞 Fix Menu's submenu cannot open when specified non-existed `defaultOpenKeys`. [#8475](https://github.com/ant-design/ant-design/issues/8475)
-- 🐞 Fix type name collisions of `InputProps` and `SearchProps` in Input, AutoComplete, Transfer. [#8478](https://github.com/ant-design/ant-design/issues/8478)
-
-## 3.0.1
-
-`2017-12-11`
-
-* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
-* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
-* Fix that Affix will be overlap when it is heigher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
-* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* Fix the aligment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
-* Menu
-  * Fix the popup will disappear unexpectly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
-  * Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
-* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
-* Table
-  * Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
-  * Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
-* TypeScript
-  * Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
-  * Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
-  * Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
-  * Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
-  * Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
-
-## 3.0.0
-
-`2017-12-04`
-
-Learn more in the [Ant Design 3.0 announcement post](https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c)!
-
-### Major Changes
-
-- New [color system](https://ant.design/docs/spec/colors#Color-Palettes), We changed our primary color from 『`#108EE9`』 to 『`#1890FF`』, we called the new primary color "拂晓蓝 (Daybreak Blue)" which means the color of the sky at daybreak.
-- New design of components.
-- Increased the base font size from 12px to 14px.
-- Changed default locale to `en_US`.
-- Support React 16.
-- Better TypeScript support.
-- New [List](https://ant.design/components/list/) component.
-- New [Divider](https://ant.design/components/divider/) component.
-- 30 New [icons](https://ant.design/components/icon/).
-
-### Breaking Changes
-
-We provide a [migration tool](https://github.com/ant-design/antd-migration-helper) to help you find deprecated usages in your codebase.
-
-- Card's `noHovering` has been renamed to `hoverable`，and its default value now is `true`.
-- Added new Grid breakpoints. [#7230](https://github.com/ant-design/ant-design/pull/7230)
-- Form `getFieldDecorator`'s `exclusive` option has been removeed.
-- Added `Form.createFormField`, and you must use it to wrap field data returned in `option.mapPropsToFields`:
-
-  ```diff
-  import { Form } from 'antd';
-
-  Form.create({
-    mapPropsToFields() {
-      return {
-  -     name: { value: 'antd' },
-  +     name: Form.createFormField({ value: 'antd' }),
-      };
-    },
-  })
-  ```
-
-- Improved global reset style, if you encounter style problem after upgrading, you can try import our v2 compatible style.
-
-  ```javascript
-  import 'antd/lib/style/v2-compatible-reset';
-  ```
-
-  Or use less
-
-  ```less
-  @import '~antd/lib/style/v2-compatible-reset.less';
-  ```
-
-- Since we changed default locale to en_US, LocalProvider is not required any more for English users.
-- We don't set `size="large"` to `Input` in `Form` by default any more.
-- `Input.Search` 🔍 icon don't be interactive anymore, you can use new `enterButton` prop to add a button after input.
-- UMD version of `dist/antd.js` doesn't include moment any more, you need add moment by yourself if you are using the UMD version.
-  ```diff
-  <html>
-    <head>
-  +   <script src="https://unpkg.com/moment@2.19.3/moment.js"></script>
-      <script src="https://unpkg.com/antd@3.0.0/dist/antd.js"></script>
-    </head>
-  </html>
-  ```
-
-### Removed Deprecations
-
-- 🗑 DatePicker.Calendar has been removed, you can use Calendar directly.
-- 🗑 DatePicker's `toggleOpen` prop has been removed, use `onOpenChange` instead.
-- 🗑 Form's `inline`, `horizontal`, `vertical` props has been removed, use `layout` instead.
-- 🗑 Input's `type` prop has dropped textarea support, please use Input.TextArea instead.
-- 🗑 Mention's `toEditorState` has been removed.
-- 🗑 Select's `multiple`, `combobox`, `tags` props has been removed, use `mode` instead.
-
-### Features and Improvements
-
-- 🌟 Tabs added new size `size="large"`。
-- 🌟 Row's `gutter` now support responsive setting, you can write `gutter={{ sm: 16, lg: 32 }}`.
-- 🌟 Spin added new `indicator` prop to allow setting custom indicator. [#7977](https://github.com/ant-design/ant-design/pull/7977) [@kossel](https://github.com/ant-design/ant-design/pull/7977)
-- 🌟 Input.Search added new `enterButton` prop to allow setting custom search button.[#7596](https://github.com/ant-design/ant-design/issues/7596)
-- 🌟 Mention added new `placement` prop to allow setting the popup direction.
-- 🌟 Carousel added new `next()`, `prev()`, `goTo(slideNumber)` methods to allow controlling slides programmatically.
-- 🌟 Button added link support，Button with `href` prop will render to `<a>`. [#8343](https://github.com/ant-design/ant-design/pull/8343)
-- 🌟 Steps was refactored, first rendering won't flash. [#6010](https://github.com/ant-design/ant-design/issues/6010)
-- 🌟 Switch added new `loading` prop to show a loading status.
-- Menu
-  - 🌟 We refactored it with [rc-trigger](https://github.com/react-component/trigger) for delay popup and auto overflow in viewport.
-  - 🌟 Added new `subMenuOpenDelay` and `subMenuCloseDelay` props to allow setting delay time for submenu toggling.
-  - 🌟 Added new `forceSubMenuRender` prop to render submenu even if it's collapsed. [#5586](https://github.com/ant-design/ant-design/issues/5586)
-- Form
-  - 🌟 Added animations for validation message showing.
-  - 🌟 Added field conditional rendering support. [#react-component/117](https://github.com/react-component/form/issues/117)
-- Message
-  - 🌟 Allow `duration` optional. [#7857](https://github.com/ant-design/ant-design/issues/7857) [@monkindey](https://github.com/monkindey)
-- Badge
-  - 🌟 Added new `offset` prop to allow setting the offset of status point.
-  - 🌟 `status` can use whith `children` now. [#8164](https://github.com/ant-design/ant-design/issues/8164)
-- Card
-  - 🌟 Added new `inner` type. [Demo](https://ant.design/components/card/#components-card-demo-inner)。
-  - 🌟 Added `cover`、`actions` and a new `Meta` component. [Demo](https://ant.design/components/card/#components-card-demo-meta)。
-- DatePicker
-  - 🌟 Added `mode` and `onPanelChange`，to allow controlling the panel mode. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-mode)。
-  - 🌟 Added `WeekPicker` component. [Demo](https://ant.design/components/date-picker/#components-date-picker-demo-basic)
-  - 🌟 Added new `dateRender` prop to allow customizing date cell.
-- TimePicker
-  - 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time setps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
-  - 🌟 Added new `focusOnOpen` prop to focus input after panel is open.
-- Table
-  - 🌟 Added new `components` prop to allow overriding default table elements.
-    ```javascript
-    // You can override following elements
-    const components = {
-      table: MyTable,
-      header: {
-        wrapper: HeaderWrapper,
-        row: HeaderRow,
-        cell: HeaderCell,
-      },
-      body: {
-        wrapper: BodyWrapper,
-        row: BodyRow,
-        cell: BodyCell,
-      },
-    };
-
-    <Table components={components} columns={columns data={data}}  />
-    ```
-  - 🌟 Added new `onRow` prop to allow passing custom props to table body row.
-  - 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row.
-  - 🌟 Added `column[onCell]` to allow passing custom props to table body cell.
-  - 🌟 Added `column[onHeaderCell]` to allow passing custom props to table header cell.
-  - 🌟 Added `column[align]` to allow setting how text aligns.
-  - 🌟 Added `column[defaultSortOrder]` to allow setting default sort order. [#8111](https://github.com/ant-design/ant-design/pull/8111) [@megawac](https://github.com/megawac)
-  - 🌟 Added `rowSelection[fixed]` to allow fixing the selection column.。
-  - 🙅 Deprecated `getBodyWrapper`, please use `components` instead.
-  - 🙅 Deprecated `onRowClick`，`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`, please use `onRow` instead.
-    ```javascript
-    <Table onRow={(record) => ({
-      onClick: () => {},
-      onDoubleClick: () => {},
-      onContextMenu: () => {},
-      onMouseEnter: () => {},
-      onMouseLeave: () => {},
-    })} />
-    ```
-- Select
-  - 🌟 Option's value can be a number in single or multiple mode.
-  - 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props.
-  - 🌟 Added new `showAction` prop to allow setting the trigger action for popup.
-  - 🌟 Added new `onMouseEnter` and `onMouseLeave` callback.
-- LocaleProvider
-  - 🇮🇸 Added Icelandic. [#7561](https://github.com/ant-design/ant-design/pull/7561) [@paunovic-stefan](https://github.com/paunovic-stefan)
-  - 🇪🇬 Added Egyptian Arabic. [#7888](https://github.com/ant-design/ant-design/pull/7888) [@mohamed-seada-1994](https://github.com/mohamed-seada-1994)
-  - 🇺🇦 Added Ukrainian. [#8169](https://github.com/ant-design/ant-design/pull/8169) [@anxolerd](https://github.com/anxolerd)
-
-### Bug fixes
-
-- Form
-  - 🐞 Fixed issue result in Input icon is hovered by feedback icon.
-  - 🐞 Fixed feedback icon not centered in large input.
-- 🐞 Fix Menu key press error. [#8089](https://github.com/ant-design/ant-design/issues/8089)
-
-### Other things
-
-- Don't need set `allowSyntheticDefaultImports` when using in TypeScript.
-- We removed `react@0.14` and `react@15` from `peerDependencies`, though `antd@3.0` still works on old React versions, but we highly recommend you upgrading to React 16 since we may use the new features only exists in React 16 in the future. See [React 16](https://reactjs.org/blog/2017/09/26/react-v16.0.html)
-- Fully es module support, if you are using webpack 3, you can set babel-plugin-import's `libraryDirectory` to `es` to enable tree shaking .
-- We will support 2.x branch until June in next year.
-
-## 2.x
-
-Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.en-US.md) to read `2.x` change logs.
-
-
-## 1.11.4
-
-Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.
+All releases notes can be found [here](https://github.com/NG-ZORRO/ng-zorro-antd/releases)
\ No newline at end of file
diff --git a/docs/changelog.zh-CN.md b/docs/changelog.zh-CN.md
index 3e8acdaf575..0819be12ce9 100755
--- a/docs/changelog.zh-CN.md
+++ b/docs/changelog.zh-CN.md
@@ -1,12 +1,10 @@
 ---
-order: 3
+order: 9
 title: 更新日志
 toc: false
 timeline: true
 ---
 
-`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
-
 #### 发布周期
 
 * 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
@@ -15,23 +13,170 @@ timeline: true
 
 ---
 
-## 3.0.2
-
-`2017-12-17`
-
-- 📝 提供了 3.0 迁移工具。[e71b68dd](https://github.com/ant-design/ant-design/commit/e71b68dd1d2ff91200fea6dd9d56e6aa5653edbc)
-- 📝 重写了 [开源贡献指南](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.zh-CN.md)
-- 🌟 优化 notification 在小屏幕下的显示效果。[#8631](https://github.com/ant-design/ant-design/issues/8631)
-- 🌟 优化了 Pagination 的样式和并修复了对齐和边距问题。
-- 🐞 升级 react-slick 到 `0.16.0`，修复 peerDependencies 安装警告。[#8455](https://github.com/ant-design/ant-design/issues/8455)
-- 🐞 修复固定列头的表格大小设置无效的问题。[#8577](https://github.com/ant-design/ant-design/issues/8577)
-- 🐞 修复 DatePicker 等时间组件的 `locale` 属性失效的问题。[#8635](https://github.com/ant-design/ant-design/issues/8635)
-- 🐞 修复 Popover 的箭头偏移和大小无法覆盖的问题。[#8548](https://github.com/ant-design/ant-design/issues/8548) [#8549](https://github.com/ant-design/ant-design/issues/8549)
-- 🐞 修复 AutoComponent 的 `notFoundContent` 设置无效的问题。[#8553](https://github.com/ant-design/ant-design/issues/8553)
-- 🐞 微调 RangePicker 的垂直对齐问题。
-- 🐞 Layout.Sider 的响应式断点和栅格系统保持一致。[#8620](https://github.com/ant-design/ant-design/issues/8620)
-- 🐞 修复一个 collapsedWidth 为 0 时，收缩后子菜单依然会显示的问题。[#8587](https://github.com/ant-design/ant-design/issues/8587)
-- 🐞 修复 Card 的 `Meta.title` 文本无法自动截断的问题。[#8597](https://github.com/ant-design/ant-design/issues/8597)
-- 🐞 修复带边框的 List 下的分页样式边距。[#8562](https://github.com/ant-design/ant-design/issues/8562)
-- 🐞 修复一个 Menu 指定了不存在的 defaultOpenKeys 时子菜单无法展开的问题。[#8475](https://github.com/ant-design/ant-design/issues/8475)
-- 🐞 修复 Input、AutoComplete、Transfer 的 `InputProps` 和 `SearchProps` TypeScript 类型命名冲突。[#8478](https://github.com/ant-design/ant-design/issues/8478)
\ No newline at end of file
+## 0.7.0-beta.1
+
+`2018-03-15`
+
+0.7.0 beta 作为 1.0 正式版 之前的最后一个版本，涉及到了底层的大量重构与改动，大部分 API 将与 1.0 正式版本的内容保持一致，目前剩余以下组件仍在紧张开发中，最近几日会逐步放出
+
+- TimePicker
+- DatePicker
+- Mention
+- TreeSelect
+
+### 主要变化
+
+- 同步Ant Design 3.0 的设计
+- 支持定制主题
+- 支持英文文档
+- 支持34种语言类型
+- 已有组件的功能与Ant Design React同步
+- 大量组件的性能优化与重构
+- 单元测试率提高到95以上%
+- 新的 Tree 组件
+- 新的 AutoComplete 组件
+- 新的 Divider 组件
+- 新的 List 组件
+
+### 升级内容
+
+#### 全局部分
+
+- 需要手动引入样式文件，支持自定义主题
+- 不再依赖 moment，新增加 date-fns 依赖
+- `forRoot` 方法不再接受字体配置，本地字体部署需要在定制主题中实现
+
+#### Button
+- `nz-button` 内部不再需要加入`<span>`标签
+
+#### Icon
+- 新增部分iconfont
+- 本地字体部署需要在定制主题中实现
+
+#### Grid
+- 栅格断点增加xxl
+- 栅格间隔支持根据不同屏幕宽度变化
+
+#### Layout
+- 支持 翻转折叠提示箭头的方向
+- 支持 自定义Trigger为模板变量
+
+#### Affix
+- Todo
+
+#### Breadcrumb
+- 自定义分隔符 支持传入模板
+
+#### Dropdown
+- 增加边界检测
+- 增加右键菜单支持
+
+#### Menu
+- 支持菜单是否可选中功能
+- 增加子菜单选中事件
+- 支持二级菜单禁用
+- 增加自动边界检测
+
+#### Pagination
+- 支持自定义渲染页码结构
+- 支持只有一页时是否隐藏分页器
+
+#### Steps
+- 支持传入模板可以自定义点状步骤条渲染内容
+- 自定义图标 支持传入 样式名称和模板两种方式，原有方式废弃
+- 自定义标题 支持传入模板和字符串
+
+
+#### Checkbox
+- label 内部不再需要写入 `span` 标签
+- 新增灵活布局的使用方式
+
+#### Form
+- 废弃原有 Directive 的使用方式，大幅度简化使用方式
+
+#### Input
+- 暴露原生 input 标签，大幅度简化使用方式
+
+#### InputNumber
+- 重写了内部逻辑，与React版本逻辑保持一致
+- 支持更多快捷键操作
+
+#### Radio
+- 内部不再需要写入 `span` 标签
+- 支持nzName及更多快捷键操作
+
+#### Rate
+— 支持自定义字符
+- 支持清除模式
+
+#### Select
+- 支持 option 分组功能
+- 支持 compareWith 方法
+- 支持 nzDropdownClassName、nzDropdownMatchSelectWidth、nzDropdownStyle等对样式定义的方法
+- option 自定义内容方式改变
+- 增加 nzFilterOption、nzServerSearch 等搜索定义API
+
+#### Switch
+- 自定义内容方式改变，nzCheckedChildren 与 nzUnCheckedChildren 支持传入 模板和字符串
+- 支持loading效果
+
+#### Calendar
+- TODO
+
+#### Card
+- 重写使用方式，大幅度降低使用成本
+
+#### Carousel
+- 支持动态调整所有属性，重写内部逻辑
+
+#### Collapse
+- selector名称改变
+- 面板头部内容支持模板和字符串变量
+- 增加是否展示箭头的方法
+- 增加展开回调函数
+
+#### Table
+- 重写内部逻辑，大幅度简化使用方式
+- 支持React版本的全部功能
+
+#### Tabs
+- nzTitle 的传入方式改变，支持传入模板和字符串
+- nzTabBarExtraContent 的传入方式改变
+- 增加 nzTabBarGutter、nzOnNextClick、nzOnPrevClick、nzHideAll等多种方法
+
+#### Tags
+- 重写使用方式，增加 nzMode 选项
+
+#### Timeline
+- 幽灵节点的定义支持 模板 字符串和布尔类型
+- 支持自定义自定义时间轴点
+
+#### Alert
+- 自定义图标类型、自定义关闭按钮、警告提示的辅助性文字介绍、	警告提示内容 全部支持传入模板
+
+#### Modal
+- 重构，同一套代码，以模版方式支持普通模态框和确认框
+- 支持AntDesign的所有参数用法（部分参数有调整）
+- 额外支持设置确认/取消按钮的loading状态
+- 增强footer的自定义：支持配置方式设置按钮组
+- 更加便捷的方式进行内外组件与对话框的相互通信和调用
+
+#### Progress
+- 重写，支持React的全部功能
+
+
+#### Spin
+- 支持自定义 加载指示符
+
+#### Anchor
+- TODO
+
+#### BackTop
+- TODO
+
+#### Divider
+- TODO
+
+## 之前版本
+
+之前版本的更新记录可以在 [Github](https://github.com/NG-ZORRO/ng-zorro-antd/releases) 查看
\ No newline at end of file
diff --git a/docs/contributing.en-US.md b/docs/contributing.en-US.md
index 7117e5d1917..528055a03cb 100644
--- a/docs/contributing.en-US.md
+++ b/docs/contributing.en-US.md
@@ -1,41 +1,35 @@
 ---
 order: 9
-title: Contributing to Ant Design
+title: Contributing to NG-ZORRO
 ---
 
-[中文版](./CONTRIBUTING.zh-CN.md)
-
-The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
+The following is a set of guidelines for contributing to NG ZORRO. Please spend several minutes in reading these guidelines before you create an issue or pull request.
 
 ## Code of Conduct
 
-We have adopted a [Code of Conduct](../CODE_OF_CONDUCT.md) that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+We have adopted a [Code of Conduct](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CODE_OF_CONDUCT.md) that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
 
 ## Open Development
 
-All work on Ant Design happens directly on [GitHub](https://github.com/ant-design). Both core team members and external contributors send pull requests which go through the same review process.
-
-## Branch Organization
-
-According to our [release schedule](../CHANGELOG.md#release-schedule), we'll cut a `feature` branch (e.g. `feature-3.1` for 3.1 release) from `master` every month. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch.
+All work on NG-ZORRO happens directly on [GitHub](https://github.com/NG-ZORRO/ng-zorro-antd). Both core team members and external contributors send pull requests which go through the same review process.
 
 ## Bugs
 
-We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reprduction with this [template](https://u.ant.design/codesandbox-repro).
+We are using [GitHub Issues](https://github.com/NG-ZORRO/ng-zorro-antd/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](https://ng.ant.design/issue-helper/#/new-issue) and provide a reprduction with this [template](https://stackblitz.com/edit/ng-zorro-antd-setup?file=app%2Fapp.component.ts).
 
-Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ).
+Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](docs/faq/en).
 
 ## Proposing a Change
 
-If you intend to change the public API or introduce new feature, we also recommend use our [issue helper](http://new-issue.ant.design) to create a feature request issue.
+If you intend to change the public API or introduce new feature, we also recommend use our [issue helper](https://ng.ant.design/issue-helper/#/new-issue) to create a feature request issue.
 
 ## Your First Pull Request
 
 Working on your first Pull Request? You can learn how from this free video series:
 
-[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
+[How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
 
-To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) that contain bugs or small features that have a relatively limited scope. This is a great place to get started.
+To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/NG-ZORRO/ng-zorro-antd/labels/good%20first%20issue) that contain bugs or small features that have a relatively limited scope. This is a great place to get started.
 
 If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don’t accidentally duplicate your effort.
 
@@ -47,23 +41,19 @@ The core team is monitoring for pull requests. We will review your pull request
 
 **Before submitting a pull request**, please make sure the following is done:
 
-1. Fork the repository and create your branch from [proper branch](./CONTRIBUTING.md#branch-organization).
 1. Run `npm install` in the repository root.
-1. If you’ve fixed a bug or added code that should be tested, add tests!
-1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
-1. Run `npm test -- -u` to update [jest snapshot](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if has).
-1. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit`.
-
-Sending a Pull Request to [react-component](https://github.com/react-component/):
-
-Since antd's components are based on react-component, sometimes you may need to send pull request to the corresponding react-component repository. If it's a bugfix pull request, after it's merged, the core team will release a patch release for that component as soon as possible, then you only need to do is reinstalling antd in your project to get the latest patch release. If it's a feature pull request, after it's merged, the core team will release a minor release, then you need raise another pull request to [Ant Design](https://github.com/ant-design/ant-design/) to update dependencies, document and TypeScript interfaces (if needed).
+2. If you’ve fixed a bug or added code that should be tested, add tests!
+3. Ensure the test suite passes (npm run test). 
+4. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit`.
+5. Make sure rebase your code to keep the history clean.
+6. Make sure your commit message meet the [guidelines](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#-commit-message-guidelines)
 
 ## Development Workflow
 
-After cloning antd, run `npm install` to fetch its dependencies. Then, you can run several commands:
+After cloning `ng-zorro-antd`, run `npm install` to fetch its dependencies. Then, you can run several commands:
 
-1. `npm start` runs Ant Design website locally.
-1. `npm run lint` checks the code style.
-1. `npm test` runs the complete test suite.
-1. `npm run compile` compiles TypeScript code to the `lib` and `es` directory.
-1. `npm run dist` creates UMD build of antd.
+1. `npm run site:start` runs NG-ZORRO website locally.
+2. `npm run lint` checks the code style.
+3. `npm test` runs the complete test suite.
+4. `npm run compile` compiles TypeScript code to the `lib` and `es` directory.
+5. `npm run generate` creates build of `ng-zorro-antd`.
diff --git a/docs/contributing.zh-CN.md b/docs/contributing.zh-CN.md
index 0c854ed7227..afd6d2a01f8 100644
--- a/docs/contributing.zh-CN.md
+++ b/docs/contributing.zh-CN.md
@@ -3,37 +3,33 @@ order: 9
 title: 贡献指南
 ---
 
-这篇指南会指导你如何为 Ant Design 贡献一份自己的力量，请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南。
+这篇指南会指导你如何为 NG-ZORRO 贡献一份自己的力量，请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南。
 
 ## 行为准则
 
-我们有一份 [行为准则](../CODE_OF_CONDUCT.md)，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保你能明白哪些是可以做的，哪些是不可以做的。
+我们有一份 [行为准则](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CODE_OF_CONDUCT.md)，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保你能明白哪些是可以做的，哪些是不可以做的。
 
 ## 透明的开发
 
-我们所有的工作都会放在 [GitHub](https://github.com/ant-design) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要进过同样流程的 review。
-
-## 分支管理
-
-基于我们的 [发布周期](../CHANGELOG.zh-CN.md#release-schedule)，我们每个月都会从 `master` 分支切一个 `feature` 分支出来（比如 `features-3.1` 分支用来发布 3.1 版本）。 如果你要修一个 bug，那么请发 pull request 到 `master`；如果你要提一个增加新功能的 pull request，那么请基于 `feature` 分支来做。
+我们所有的工作都会放在 [GitHub](https://github.com/NG-ZORRO/ng-zorro-antd) 上。不管是核心团队的成员还是外部贡献者的 pull request 都需要进过同样流程的 review。
 
 ## Bugs
 
-我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决，最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。 并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。
+我们使用 [GitHub Issues](https://github.com/NG-ZORRO/ng-zorro-antd/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决，最好的办法就是通过我们提供的 [issue 小助手](https://ng.ant.design/issue-helper/#/new-issue) 来提 issue。 并且能使用这个 [模板](https://stackblitz.com/edit/ng-zorro-antd-setup?file=app%2Fapp.component.ts) 来提供重现。
 
-在你报告一个 bug 之前，请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)。
+在你报告一个 bug 之前，请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](docs/faq/zh)。
 
 ## 新增功能
 
-如果你有改进我们的 API 或者新增功能的想法，我们同样推荐你使用我们提供的 [issue 小助手](http://new-issue.ant.design) 来新建一个添加新功能的 issue。
+如果你有改进我们的 API 或者新增功能的想法，我们同样推荐你使用我们提供的 [issue 小助手](https://ng.ant.design/issue-helper/#/new-issue) 来新建一个添加新功能的 issue。
 
 ## 第一次贡献
 
 如果你还不清楚怎么在 GitHub 上提 Pull Request ，可以阅读下面这篇文章来学习：
 
-[如何优雅地在 GitHub 上贡献代码](https://segmentfault.com/a/1190000000736629)
+[如何为开源做贡献](https://opensource.guide/zh-cn/how-to-contribute/)
 
-为了能帮助你开始你的第一次尝试，我们用 [good first issues](https://github.com/ant-design/ant-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) 标记了一些比较比较容易修复的 bug 和小功能。这些 issue 可以很好地做为你的首次尝试。
+为了能帮助你开始你的第一次尝试，我们用 [good first issues](https://github.com/NG-ZORRO/ng-zorro-antd/labels/good%20first%20issue) 标记了一些比较比较容易修复的 bug 和小功能。这些 issue 可以很好地做为你的首次尝试。
 
 如果你打算开始处理一个 issue，请先检查一下 issue 下面的留言以确保没有别人正在处理这个 issue。如果当前没有人在处理的话你可以留言告知其他人你将会处理这个 issue，以免别人重复劳动。
 
@@ -41,27 +37,22 @@ title: 贡献指南
 
 ## Pull Request
 
-Ant Design 团队会关注所有的 pull request，我们会 review 以及合并你的代码，也有可能要求你做一些修改或者告诉你我们为什么不能接受这样的修改。
+NG ZORRO 团队会关注所有的 pull request，我们会 review 以及合并你的代码，也有可能要求你做一些修改或者告诉你我们为什么不能接受这样的修改。
 
 **在你发送 Pull Request 之前**，请确认你是按照下面的步骤来做的：
 
-1. 基于 [正确的分支](./CONTRIBUTING.zh-CN.md#branch-organization) 来做修改。
-2. 在项目根目录下运行了 `npm install`。
-3. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
-4. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
-5. 运行 `npm test -- -u` 来更新 [jest snapshot](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) 并且把这些更新也提交上来（如果有的话）。
-6. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行。
-
-给 [react-component](https://github.com/react-component/) 发送 pull request：
-
-由于 antd 的大部分组件都是基于 react-component 的，所以有时候你可能需要给相应的 react-component 仓库发送 pull request。如果你是修复了某个 bug，那么我们在合并你的修改后会尽快发布一个 patch 版本，然后你只要重新安装你的依赖就可以使用新发布的版本了。如果你的 pull request 是新增了某个功能，那么在你的修改合并并且发布版本后，你还需要发送一个 pull request 到 [Ant Design](https://github.com/ant-design/ant-design/) 来升级相应的依赖、文档以及 TypeScript 的类型定义。
+1. 在项目根目录下运行了 `npm install`。
+2. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
+3. 确认所有的测试都是通过的 `npm run test`。 小贴士: Test 会在你 `git commit` 的时候自动运行。
+4. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行。
+5. 确保你的代码在提交之前经过了正确的 [Rebase](https://www.digitalocean.com/community/tutorials/how-to-rebase-and-update-a-pull-request)
+6. 确保你的提交符合[规范](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#-commit-message-guidelines)
 
 ## 开发流程
 
-在你 clone 了 antd  的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令：
+在你 clone 了 `ng-zorro-antd`  的代码并且使用 `npm install` 安装完依赖后，你还可以运行下面几个常用的命令：
 
-1. `npm start` 在本地运行 Ant Design 的网站。
+1. `npm run site:start` 在本地运行 `NG-ZORRO` 的网站。
 2. `npm run lint` 检查代码风格。
-3. `npm test` 运行测试。
-4. `npm run compile` 编译 TypeScript 代码到 lib 和 es 目录。
-5. `npm run dist` 构建 antd 的 UMD 版本到 dist 目录。
+3. `npm run test` 运行测试。
+5. `npm run generate` 构建 `ng-zorro-antd` 到 `publish` 目录。
diff --git a/docs/customize-theme.en-US.md b/docs/customize-theme.en-US.md
index de9a6de82e8..0e03aaff7a1 100644
--- a/docs/customize-theme.en-US.md
+++ b/docs/customize-theme.en-US.md
@@ -11,53 +11,20 @@ Ant Design allows you to customize some basic design aspects in order to meet th
 
 We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
 
-- [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
-
-Please report an issue if the existing list of variables is not enough for you.
+> You can use the theme define file of react version in ng-zorro-antd too.
 
 ## How to do it
 
-We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
-
-You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground.
-
-### 1) Using `theme` property (recommended way)
+Create a standalone less file like the one below, and add the path of it to the list of `styles` in `.angular-cli.json` file.
 
-Specify the `theme` property in the `package.json` or `.roadhogrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
-- example of directly specifying the custom values as an object:
-```js
-"theme": {
-  "primary-color": "#1DA57A",
-},
+```css
+@import "~antd/dist/antd.less";   // import official less entry file
+@import "your-theme-file.less";   // override variables here
 ```
-- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file:
-```js
-"theme": "./theme.js",
-```
-
-This approach is available only when using [antd-init](https://github.com/ant-design/antd-init) or [dva-cli](https://github.com/dvajs/dva-cli). If you choose other boilerplates, you can write a webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
-
-Note:
-
-- Importing styles from less files is necessary.
-  - If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
-  - If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
-- When using `dva-cli@0.7.0+`, you should add the `theme` block to [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) instead of `package.json`.
-- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
-
-### 2) Overriding Less variables (alternative way)
-
-Override variables via less definition files.
-
-Create a standalone less file like the one below, and import it in your project.
 
-   ```css
-   @import "~antd/dist/antd.less";   // import official less entry file
-   @import "your-theme-file.less";   // override variables here
-   ```
+[Here](https://github.com/NG-ZORRO/ng-zorro-antd/blob/0.7.0/site_scripts/_site/src/theme.less) is a sample of theme define file.
 
-Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
 
-## Related Articles
+## Local deployment fonts
 
-- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+You can modify `@icon-url` to make a locally deployed version of the icon font, the newest iconfont file could be downloaded [here](https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip).
\ No newline at end of file
diff --git a/docs/customize-theme.zh-CN.md b/docs/customize-theme.zh-CN.md
index f773399fc50..4878cab145d 100644
--- a/docs/customize-theme.zh-CN.md
+++ b/docs/customize-theme.zh-CN.md
@@ -9,58 +9,23 @@ Ant Design 设计规范上支持一定程度的样式定制，以满足业务和
 
 ## 样式变量
 
-antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
+Ant Design 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整，[默认样式变量](https://github.com/NG-ZORRO/ng-zorro-antd/blob/0.7.0/components/style/themes/default.less)
 
-- [默认样式变量](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
-
-如果以上变量不能满足你的定制需求，可以给我们提 issue。
+> Ant Design React 的主题定制文件在 `ng-zorro-antd` 中同样可以使用。
 
 ## 定制方式
 
-我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
-在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
-
-可以在本地运行 [例子](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) 查看定制效果。
-
-### 1) theme 属性（推荐）
-
-配置在 `package.json` 或 `.roadhogrc` 下的 `theme` 字段。theme 可以为配置为一个对象或文件路径。
-
-```js
-"theme": {
-  "primary-color": "#1DA57A",
-},
-```
-
-或者 [一个 js 文件](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js)：
-
-```js
-"theme": "./theme.js",
-```
-
-定义 `theme` 属性时，需要配合使用（[antd-init](https://github.com/ant-design/antd-init) 或 [dva-cli](https://github.com/dvajs/dva-cli)。如果你使用的是其他脚手架，可以参考 [atool-build 中 less-loader 的 webpack 相关配置 ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138)，利用 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 配置来覆盖原来的样式变量。
-
-注意：
-
-- 样式必须加载 less 格式。
-  - 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。
-  - 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。
-- `dva-cli@0.7.0+` 的 `theme` 属性需要写在 [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) 文件里。
-- 如果要覆盖 `@icon-url` 变量，内容需要包括引号 `"@icon-url": "'your-icon-font-path'"`（[修正示例](https://github.com/visvadw/dvajs-user-dashboard/pull/2)）。
-
-### 2) less
-
 用 less 文件进行变量覆盖。
 
-建立一个单独的 `less` 文件如下，再引入这个文件。
+建立一个单独的 `less` 文件如下，再在 `.angular-cli.json` 文件的 `styles` 列表加入该文件
 
-   ```css
-   @import "~antd/dist/antd.less";   // 引入官方提供的 less 样式入口文件
-   @import "your-theme-file.less";   // 用于覆盖上面定义的变量
-   ```
+```css
+@import "~ng-zorro-antd/src/ng-zorro-antd.less";   // 引入官方提供的 less 样式入口文件
+@import "your-theme-file.less";   // 用于覆盖上面定义的变量
+```
 
-注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
+自定义 less 变量的文件可以参考 [这里](https://github.com/NG-ZORRO/ng-zorro-antd/blob/0.7.0/site_scripts/_site/src/theme.less)。
 
-## 社区教程
+## 本地部署字体
 
-- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+通过修改 `@icon-url` 变量， 可以将字体部署到本地，最新的 iconfont 可以在 [这里](https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip) 下载。
\ No newline at end of file
diff --git a/docs/faq.en-US.md b/docs/faq.en-US.md
new file mode 100644
index 00000000000..47e3590721c
--- /dev/null
+++ b/docs/faq.en-US.md
@@ -0,0 +1,6 @@
+---
+order: 8
+title: FAQ
+---
+
+This article has not been translated, hope that your can PR to translated it.
\ No newline at end of file
diff --git a/docs/faq.zh-CN.md b/docs/faq.zh-CN.md
new file mode 100644
index 00000000000..a097112d6eb
--- /dev/null
+++ b/docs/faq.zh-CN.md
@@ -0,0 +1,39 @@
+---
+order: 8
+title: 常见问题
+---
+
+### 为什么不提供模块单独引入
+
+事实上，从 `ng-zorro-antd` 的第一个版本开始，所有的 `ng-zorro-antd` 代码就完全由 TypeScript 编写，打包时会根据代码中使用的模块 Tree Shaking，未使用的模块并不会打包进生成的应用中，因此单模块引入是完全没有任何必要的。
+
+![](https://img.alicdn.com/tfs/TB1D8MXdTtYBeNjy1XdXXXXyVXa-2864-1592.jpg)
+
+### 有些特性为什么不会被支持
+
+`ng-zorro-antd` 是 Angular 版本 Ant Design 的实现，这意味着只有 Ant Design 支持的交互、功能 才会被 `ng-zorro-antd` 实现。
+
+### 打包出来的文件太大
+
+首先请确定使用了 `ng build --prod` 正确的方式进行了打包，如果除 `ng-zorro-antd` 之外还引入了其他第三方组件库，你可以通过 `ng build --prod --sourcemaps` 命令生成 sourcemap 文件后，再通过 source-map-explorer 检查每个模块所占用的体积，具体操作可以参考[官方文档](https://angular.io/guide/deployment#inspect-the-bundles)。
+
+### 浏览器兼容性问题
+
+首先请确定浏览器版本得到了 Angular 的[官方支持](https://github.com/angular/angular)，并正确引入了 [polyfill](https://angular.io/guide/browser-support) 文件，另外有些组件的部分使用方式不支持部分浏览器（例如 flex显示方式），如果不是以上问题，请提 ISSUE 给我们。
+
+### 数据修改后页面为什么没有更新
+
+请确认按照正确方式使用了 [Angular](https://angular.io/guide/lifecycle-hooks#onchanges)
+
+### 为什么我的 ISSUE 会被关闭
+
+ISSUE 列表是为了 开发者 和 用户 追踪相关的开发进度而设计的，这意味 ISSUE 只接受 bug 报告或是新功能请求 (feature requests)，这意味着我们不接受用法问题。
+另外为了给予 更具体的工作更高的优先级和提高 ISSUE 处理的效率，未按照 格式提交的 ISSUE 也将会被立刻自动关闭。
+
+### Angular的相关问题在哪里提问
+
+除了Angular的官方文档和相关的论坛之外，Angular的相关问题可以在 Google 或者 百度 上搜索 `关键字 -angularjs` 来避免 `angularjs` 的干扰，例如 `angular ngmodel -angularjs` 就可以获得 Angular 关于 `ngModel` 的相关文章。
+
+### NG-ZORRO 与 Ant Design 的关系
+
+NG-ZORRO 由阿里计算平台事业部、阿里云等不同部门的一些小伙伴在原业务组件的基础上共同构建而成，整体的设计完全兼容并遵守 Ant Design 的规范，并定期会与 Ant Design React 版本保持功能同步。
diff --git a/docs/getting-started.en-US.md b/docs/getting-started.en-US.md
index 4724b8849ed..6be91741a0f 100755
--- a/docs/getting-started.en-US.md
+++ b/docs/getting-started.en-US.md
@@ -3,205 +3,128 @@ order: 1
 title: Getting Started
 ---
 
-Ant Design React is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.5) correctly.
+Ant Design Angular is dedicated to providing a **good development experience** for programmers. Make sure that you had installed [Node.js](https://nodejs.org/)(> v6.9) correctly.
 
 ---
 
-Before delving into Ant Design React, a good knowledge of [React](http://facebook.github.io/react/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
+Before delving into Ant Design Angular, a good knowledge of [Angular](https://angular.io/) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/) is needed.
 
 ## First Example
 
-The following CodeSandbox demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.
+The following StackBlitz demo is the simplest use case, and it's also a good habit to fork this demo to provide a re-producible demo while reporting a bug. Please don't use this demo as a scaffold in production.
 
-- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
+- [NG-ZORRO StackBlitz](https://stackblitz.com/edit/ng-zorro-antd-setup?file=app%2Fapp.component.ts)
 
 ## Standard Development Flow
 
-During development, you may need to compile and debug JSX and ES2015 code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
+During development, you may need to compile and debug TypeScript code, and even proxy some of the requests to mock data or other external services. All of these can be done with quick feedback provided through hot reloading of changes.
 
 Such features, together with packaging the production version, are covered in this work flow.
 
 ### 1. Installation
 
-[antd-init](https://github.com/ant-design/antd-init/) is a demo only scaffold tool. If you want to create real world projects, [dva-cli](https://github.com/dvajs/dva-cli) is our recommendation.
+We strongly recommended to develop Angular with `@angular/cli`, you can install it with the following commands.
 
 ```bash
-$ npm install antd-init -g
+$ npm install -g @angular/cli@latest
 ```
 
-Read [the documentation of `antd-init`](https://github.com/ant-design/antd-init/) and [the documentation of `ant-tool`](http://ant-tool.github.io/) to explore more features.
+Read [the documentation of `Angular CLI`](https://github.com/angular/angular-cli/wiki) to explore more features.
 
-> Also, you can use scaffold/demo which is provided by community:
->
->   - [antd-admin](https://github.com/zuiidea/antd-admin)
->   - [reactSPA](https://github.com/JasonBai007/reactSPA)
->   - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
->   - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
->   - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
->   - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
->   - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
->   - more scaffolds at [Scaffold Market](http://scaffold.ant.design/)
 
 ### 2. Create a New Project
 
-A new project can be created using CLI tools.
+A new project can be created using Angular CLI tools.
 
 ```bash
-$ mkdir antd-demo && cd antd-demo
-$ antd-init
+$ ng new PROJECT-NAME
 ```
 
-`antd-init` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
-
-### 3. Use antd's Components
-
-By default, besides the scaffolding needed to start the development, a fully working Todo application is created.
-You may study this example later. For now, just follow this guide in order to get some experience working with the result of `antd-init`.
-
-Replace the content of `index.js` with the following code.
-As you can see, there is no difference between antd's components and usual React components.
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleProvider, DatePicker, message } from 'antd';
-// The default locale is en-US, but we can change it to other language
-import frFR from 'antd/lib/locale-provider/fr_FR';
-import moment from 'moment';
-import 'moment/locale/fr';
-
-moment.locale('fr');
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      date: '',
-    };
-  }
-  handleChange(date) {
-    message.info('Selected Date: ' + date.toString());
-    this.setState({ date });
-  }
-  render() {
-    return (
-      <LocaleProvider locale={frFR}>
-        <div style={{ width: 400, margin: '100px auto' }}>
-          <DatePicker onChange={value => this.handleChange(value)} />
-          <div style={{ marginTop: 20 }}>Date: {this.state.date.toString()}</div>
-        </div>
-      </LocaleProvider>
-    );
-  }
-}
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```
-
-> All the components in antd are listed in the sidebar.
+`@angular/cli` will run `npm install` after a project is created. If it fails, you can run `npm install` by yourself.
 
-### 4. Development & Debugging
-
-Run your project and visit http://127.0.0.1:8001
+### 3. Install ng-zorro-antd
 
 ```bash
-$ npm start
+$ cd PROJECT-NAME
+$ npm install ng-zorro-antd --save
 ```
 
-### 5. Building & Deployment
+### 4. Import module
+
+Use the following codes to replace the code in `src/app/app.module.ts`.
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    NgZorroAntdModule.forRoot()
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
 
-```bash
-$ npm run build
 ```
 
-Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
+> Note: You should only import `NgZorroAntdModule.forRoot()` in root module, and import `NgZorroAntdModule` in submodule.
 
-> This guide is designed to help you to understand how to use antd, so it may not be similar to what you do in the real world.
-> But you can use those tools in your project, depending on your context and needs.
 
-## Compatibility
+### 5. Add Styles
 
-Ant Design React supports all the modern browsers and IE9+.
+Add `ng-zorro-antd.less` to the list of `styles` in `.angular-cli.json`.
 
-You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
 
-If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
+```json
+...
+  "styles": [
+    "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
+  ]
+...
+```
 
-> Please avoid using both the babel and shim methods at the same time.
+### 6. The first component
 
-> If you run into problems with [startsWith ](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445), you should import  [es6-shim](https://github.com/paulmillr/es6-shim) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) as a workaround.
+Use the following codes to replace the file of `/src/app/app.component.html`
 
 ```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <!-- import stylesheet -->
-    <link rel="stylesheet" href="/index.css">
-    <!-- Polyfills -->
-    <!--[if lt IE 10]>
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-    <![endif]-->
-    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
-  </head>
-  <body>
-  </body>
-  <!-- import common dependencies -->
-  <script src="/common.js"></script>
-  <!-- import entry file -->
-  <script src="/index.js"></script>
-</html>
+<button nz-button nzType="primary">Button</button>
 ```
 
-#### IE8 note
-
-> We don't support IE8 after `antd@2.0`.
-
-You may encounter problems like [#28](https://github.com/ant-tool/atool-build/issues/28) and [#858](https://github.com/ant-design/ant-design/issues/858), since `babel@6.x` doesn't support IE8. You can refer to this [webpack config](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8).
-
-> More about how to use React in IE8: https://github.com/xcatliu/react-ie8
-
-## Customized Work Flow
-
-If you want to customize your work flow, we recommend using [webpack](http://webpack.github.io/) to build and debug code.
 
-Also, you can use any [scaffold](https://github.com/enaqx/awesome-react#boilerplates) available in the React ecosystem. If you encounter problems, you can use our [webpack config](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) and [modify it](http://ant-tool.github.io/webpack-config.html).
-
-There are some [scaffolds](https://github.com/ant-design/ant-design/issues/129) which have already integrated antd, so you can try and start with one of these, and even contribute.
+> All the components in antd are listed in the sidebar.
 
-## Import on Demand
+### 7. Development & Debugging
 
-If you see logs like below screenshot, you might be importing all components by writing `import { Button } from 'antd';`. This will affect your app's network performance.
+Run your project now
 
+```bash
+$ ng serve --port 0 --open
 ```
-You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
-```
-
-> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png)
 
-However, we can import individual components on demand:
+Now you can see the button with ant design style in your browser.
 
-```jsx
-import Button from 'antd/lib/button';
-import 'antd/lib/button/style'; // or antd/lib/button/style/css for css format file
-```
+### 8. Building & Deployment
 
-We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'antd/lib/xxx' way:
-
-```jsx
-import { Button } from 'antd';
+```bash
+$ ng build --prod
 ```
 
-And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
-
-> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles.
-
-## Customization
+Entry files will be built and generated in `dist` directory, where we can deploy it to different environments.
 
-- [Customize Theme](/docs/react/customize-theme)
-- [Local Iconfont](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
 
-## Tips
+## Read More
 
-- You can use any `npm` modules.
-- We recommend writing code in [ES2015](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) as `babel` has been integrated into our work flow.
+Read [the documentation of `Angular CLI`](https://github.com/angular/angular-cli/wiki) to explore more features.
diff --git a/docs/getting-started.zh-CN.md b/docs/getting-started.zh-CN.md
index 4d6fb311fe2..0945ca017be 100755
--- a/docs/getting-started.zh-CN.md
+++ b/docs/getting-started.zh-CN.md
@@ -3,203 +3,123 @@ order: 1
 title: 快速上手
 ---
 
-Ant Design React 致力于提供给程序员**愉悦**的开发体验。
+NG-ZORRO 致力于提供给程序员**愉悦**的开发体验。
 
 ---
 
-在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v6.5 或以上。
+<blockquote style="border-color: red;"><p><strong>官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Angular 及配套设施的正确开发方式。如果你刚开始学习前端或者 Angular ，将框架作为你的第一步可能不是最好的主意 —— 掌握好基础知识再来吧！</strong></p></blockquote>
 
 ## 第一个例子
 
-最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
+最简单的使用方式参照以下 StackBlitz 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
 
-- [antd CodeSandbox](https://u.ant.design/codesandbox-repro)
+- [NG-ZORRO StackBlitz](https://stackblitz.com/edit/ng-zorro-antd-setup?file=app%2Fapp.component.ts)
 
 ## 标准开发
 
-实际项目开发中，你会需要对 ES2015 和 JSX 代码的构建、调试、代理、打包部署等一系列工程化的需求。
-我们提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
+实际项目开发中，你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。
+我们强烈建议使用官方的`@angular/cli`工具链辅助进行开发，下面我们用一个简单的实例来说明。
+
 
 ### 1. 安装脚手架工具
 
-[antd-init](https://github.com/ant-design/antd-init/) 是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用 [dva-cli](https://github.com/dvajs/dva-cli)。
+> 使用 `@angular/cli` 前，务必确认 [Node.js](https://nodejs.org/en/) 已经升级到 v6.9 或以上，强烈建议升级至最新版本的 `@angular/cli`。
 
 ```bash
-$ npm install antd-init -g
+$ npm install -g @angular/cli@latest
 ```
 
-更多功能请参考 [脚手架工具](https://github.com/ant-design/antd-init/) 和 [开发工具文档](http://ant-tool.github.io/)。
-
-> 除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：
->
->   - [antd-admin](https://github.com/zuiidea/antd-admin)
->   - [reactSPA](https://github.com/JasonBai007/reactSPA)
->   - [react-redux-antd by Justin-lu](https://github.com/Justin-lu/react-redux-antd)
->   - [react-redux-antd by okoala](https://github.com/okoala/react-redux-antd)
->   - [react-antd-admin](https://github.com/fireyy/react-antd-admin)
->   - [react-antd-redux-router-starter](https://github.com/yuzhouisme/react-antd-redux-router-starter)
->   - [react-redux-antd-starter](https://github.com/BetaRabbit/react-redux-antd-starter)
->   - 更多脚手架可以查看 [脚手架市场](http://scaffold.ant.design/)
+更多功能请参考 [CLI 文档](https://github.com/angular/angular-cli/wiki)。
 
 ### 2. 创建一个项目
 
-使用命令行进行初始化。
+在创建项目之前，请确保 `@angular/cli` 已被成功安装
 
 ```bash
-$ mkdir antd-demo && cd antd-demo
-$ antd-init
-```
-
-antd-init 会自动安装 npm 依赖，若有问题则可自行安装。
-
-若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
-
-### 3. 使用组件
-
-脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。
-
-直接用下面的代码替换 `index.js` 的内容，用 React 的方式直接使用 antd 组件。
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleProvider, DatePicker, message } from 'antd';
-// 由于 antd 组件的默认文案是英文，所以需要修改为中文
-import zhCN from 'antd/lib/locale-provider/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
-
-moment.locale('zh-cn');
-
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      date: '',
-    };
-  }
-  handleChange(date) {
-    message.info('您选择的日期是: ' + date.toString());
-    this.setState({ date });
-  }
-  render() {
-    return (
-      <LocaleProvider locale={zhCN}>
-        <div style={{ width: 400, margin: '100px auto' }}>
-          <DatePicker onChange={value => this.handleChange(value)} />
-          <div style={{ marginTop: 20 }}>当前日期：{this.state.date.toString()}</div>
-        </div>
-      </LocaleProvider>
-    );
-  }
-}
-
-ReactDOM.render(<App />, document.getElementById('root'));
+$ ng new PROJECT-NAME
 ```
 
-> 你可以在左侧菜单选用更多组件。
+`@angular/cli` 会自动生成一个名称为 `PROJECT-NAME` 的文件夹，并自动安装好相应依赖
 
-### 4. 开发调试
+### 3. 安装组件
 
-一键启动调试，访问 http://127.0.0.1:8001 查看效果。
+现在项目下安装 ng-zorro-antd
 
 ```bash
-$ npm start
+$ cd PROJECT_NAME
+$ npm install ng-zorro-antd --save
 ```
 
-### 5. 构建和部署
+### 4.引入模块
+
+直接用下面的代码替换 `/src/app/app.module.ts` 的内容
+
+> **注意**：在根 module 中需要使用 `NgZorroAntdModule.forRoot()`，在子 module 需要使用 `NgZorroAntdModule` 
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    NgZorroAntdModule.forRoot()
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
 
-```bash
-$ npm run build
 ```
+这样就成功在全局引入了 `ng-zorro-antd`。
 
-入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
-
-> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
-
-## 兼容性
+### 5. 引入样式
 
-Ant Design React 支持所有的现代浏览器和 IE9+。
-
-对于 IE 系列浏览器，需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
-
-如果你使用了 babel，强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
+修改 `.angular-cli.json` 文件的 `styles` 列表
+```json
+...
+  "styles": [
+    "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
+  ]
+...
+```
 
-> 避免同时使用 babel 和 shim 两种兼容方法，以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题
+### 6. 使用第一个组件
 
-> 如果在 IE 浏览器中遇到 `startsWith` 的[问题](https://github.com/ant-design/ant-design/issues/3400#issuecomment-253181445)，请引入 [es6-shim](https://github.com/paulmillr/es6-shim) 或 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)。
+用下面的代码替换 `/src/app/app.component.html`
 
 ```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <!-- 引入样式 -->
-    <link rel="stylesheet" href="/index.css">
-    <!-- Polyfills -->
-    <!--[if lt IE 10]>
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
-    <![endif]-->
-    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
-  </head>
-  <body>
-  </body>
-  <!-- 引入公用文件 -->
-  <script src="/common.js"></script>
-  <!-- 引入入口文件 -->
-  <script src="/index.js"></script>
-</html>
+<button nz-button nzType="primary">Button</button>
 ```
 
-#### IE8 note
-
-> `antd@2.0` 之后将不再支持 IE8。
-
-IE8 需要配合使用 [react@0.14.x](https://facebook.github.io/react/blog/2016/01/12/discontinuing-ie8-support.html) 版本。
-
-另外，由于 `babel@6.x` 对 IE8 的支持不佳，你可能会遇到类似 [#28](https://github.com/ant-tool/atool-build/issues/28) 和 [#858](https://github.com/ant-design/ant-design/issues/858) 的 default 报错的问题，你也可以参照这个 [webpack 配置](https://github.com/ant-design/antd-init/blob/f5fb9479ca973fade51fd6754e50f8b3fafbb1df/boilerplate/webpack.config.js#L4-L8) 来解决。
-
-> 更多 IE8 下使用 React 的相关问题可以参考：https://github.com/xcatliu/react-ie8
+### 7. 开发调试
 
-## 自行构建
+一键启动调试
 
-如果想自己维护工作流，我们推荐使用 [webpack](http://webpack.github.io/) 进行构建和调试。理论上你可以利用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#boilerplates) 进行开发，如果遇到问题可参考我们所使用的 [webpack 配置](https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js) 进行 [定制](http://ant-tool.github.io/webpack-config.html)。
-
-目前社区也有很多基于 antd 定制的 [脚手架](https://github.com/ant-design/ant-design/issues/129)，欢迎进行试用和贡献。
-
-## 按需加载
-
-如果你在开发环境的控制台看到下面的提示，那么你可能使用了 `import { Button } from 'antd';` 的写法引入了 antd 下所有的模块，这会影响应用的网络性能。
-
-```
-You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
+```bash
+$ ng serve --port 0 --open
 ```
 
-> ![](https://zos.alipayobjects.com/rmsportal/GHIRszVcmjccgZRakJDQ.png)
-
-可以通过以下的写法来按需加载组件。
+此时就可以看到最简单的 [Button效果](https://stackblitz.com/edit/ng-zorro-antd-setup?file=app%2Fapp.component.ts)
 
-```jsx
-import Button from 'antd/lib/button';
-import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
-```
-
-如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
+### 8. 构建和部署
 
-```jsx
-import { Button } from 'antd';
+```bash
+$ ng build --prod
 ```
 
-插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
-
-> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css` 手动引入，并覆盖全局样式。
-
-## 配置主题和字体
-
-- [改变主题](/docs/react/customize-theme)
-- [使用本地字体](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)
+入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
 
-## 小贴士
+## 了解更多
 
-- 你可以享用 `npm` 生态圈里的所有模块。
-- 我们使用了 `babel`，试试用 [ES2015+](http://babeljs.io/blog/2015/06/07/react-on-es6-plus) 的写法来提升编码的愉悦感。
+如果你想了解更多CLI工具链的功能和命令，建议访问 [Angular CLI](https://github.com/angular/angular-cli) 了解更多
diff --git a/docs/i18n.en-US.md b/docs/i18n.en-US.md
index 541e1200f10..747d1a4cde3 100755
--- a/docs/i18n.en-US.md
+++ b/docs/i18n.en-US.md
@@ -3,25 +3,42 @@ order: 4
 title: Internationalization
 ---
 
-The default language of `antd@2.x` is English as of yet.
+The default language of `ng-zorro-antd` is Chinese as of yet.
 If you want to use other languages, you can follow the instructions below.
 
-## LocaleProvider
+## Providers
 
-antd provides a React Component [LocaleProvider](/components/locale-provider) for configuring antd locale text globally.
+`ng-zorro-antd` provides the token of `NZ_I18N` for configuring antd locale text globally.
 
-```jsx
-import { LocaleProvider } from 'antd';
-import frFR from 'antd/lib/locale-provider/fr_FR';
+```typescript
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+
+@NgModule({
+  ...
+  imports     : [ NgZorroAntdModule.forRoot() ],
+  providers   : [ { provide: NZ_LOCALE, useValue: en_US } ], // set local i18n here
+})
+export class AppModule { }
+
+```
+
+## Service
+
+`ng-zorro-antd` provides the service of  `NzI18nService` to dynamic change the locale text.
+
+```typescript
+import { en_US, NzI18nService } from 'ng-zorro-antd';
+...
+constructor(private nzI18nService:NzI18nService) {
+}
+
+switchLanguage() {
+  this.nzI18nService.setLocale(en_US);
+}
 
-return (
-  <LocaleProvider locale={frFR}>
-    <App />
-  </LocaleProvider>
-);
 ```
 
-Note: `fr_FR` is the filename, follow below.
+Note: `en_US` is the filename, follow below.
 
 Supported languages:
 
@@ -61,9 +78,3 @@ Supported languages:
 |Vietnamese|vi_VN|
 |Chinese (Simplified)|zh_CN|
 |Chinese (Traditional)|zh_TW|
-
-See usage and ways to contribute a new locale package at [LocaleProvider](/components/locale-provider).
-
-## i18n sample
-
-We also provide you a complete sample of internationalization usage, which is using [react-intl](https://github.com/yahoo/react-intl) and LocaleProvider: [ant-design/intl-example](https://github.com/ant-design/intl-example).
diff --git a/docs/i18n.zh-CN.md b/docs/i18n.zh-CN.md
index 2cd2b85b144..5d85b34ceee 100755
--- a/docs/i18n.zh-CN.md
+++ b/docs/i18n.zh-CN.md
@@ -3,23 +3,43 @@ order: 4
 title: 国际化
 ---
 
-`antd` 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。
+`ng-zorro-antd` 目前的默认文案是中文，如果需要使用其他语言，可以在初始化时进行配置，也可以在运行中随时修改，可以参考下面的方案。
 
-## LocaleProvider
+## 初始化配置
 
-antd 提供了一个 React 组件 [LocaleProvider](/components/locale-provider) 用于全局配置国际化文案。
+`ng-zorro-antd` 提供了一个配置型 token `NZ_I18N` 用于全局配置国际化文案，可以在引入模块时初始化语言。
 
-```jsx
-import zhCN from 'antd/lib/locale-provider/zh_CN';
+```typescript
+import { NZ_I18N, en_US } from 'ng-zorro-antd';
+
+@NgModule({
+  ...
+  imports     : [ NgZorroAntdModule.forRoot() ],
+  providers   : [ { provide: NZ_LOCALE, useValue: en_US } ], // 这里设置当前全局使用的语言包
+})
+export class AppModule { }
 
-return (
-  <LocaleProvider locale={zhCN}>
-    <App />
-  </LocaleProvider>
-);
 ```
 
-注意：`zh_CN` 是文件名，以下表格也遵循同样的规则。
+## 运行时修改
+
+`ng-zorro-antd` 提供了一个服务 `NzI18nService` 用于动态修改国际化文案。
+
+```typescript
+import { en_US, NzI18nService } from 'ng-zorro-antd';
+...
+constructor(private nzI18nService:NzI18nService) {
+}
+
+switchLanguage() {
+  this.nzI18nService.setLocale(en_US);
+}
+
+```
+
+注意：`en_US` 是文件名，以下表格也遵循同样的规则。
+
+
 
 目前支持以下语言：
 
@@ -60,8 +80,3 @@ return (
 |简体中文|zh_CN|
 |繁体中文|zh_TW|
 
-具体的使用方法和新语言包贡献方式请参考 [LocaleProvider 文档](/components/locale-provider)。
-
-## i18n 项目示例
-
-我们还提供了一个使用了 [react-intl](https://github.com/yahoo/react-intl) 和 LocaleProvider 的完整的国际化项目示例：[ant-design/intl-example](https://github.com/ant-design/intl-example)，欢迎参考使用。
diff --git a/docs/introduce.en-US.md b/docs/introduce.en-US.md
index 7d494dd8f35..7a664b34c06 100755
--- a/docs/introduce.en-US.md
+++ b/docs/introduce.en-US.md
@@ -28,22 +28,16 @@ Following the Ant Design specification, we developed a Angular UI library `antd`
 ## Features
 
 - An enterprise-class UI design language for web applications.
-- A set of high-quality React components out of the box.
+- A set of high-quality Angular components out of the box.
 - Written in TypeScript with complete defined types.
-- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
 
 ## Environment Support
 
-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-* Server-side Rendering
-* [Electron](http://electron.atom.io/)
+* Modern browsers and Internet Explorer 9+ (with [polyfills](https://angular.io/guide/browser-support))
 
 ## Version
 
-- Stable: [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-- Next：  [![npm (next)](https://img.shields.io/npm/v/antd/next.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-
-You can subscribe to this feed for new version notifications: https://github.com/ant-design/ant-design/releases.atom
+- [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 
 ## Installation
 
@@ -52,110 +46,33 @@ You can subscribe to this feed for new version notifications: https://github.com
 **We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.
 
 ```bash
-$ npm install antd --save
+$ npm install ng-zorro-antd --save
 ```
 
 ```bash
-$ yarn add antd
+$ yarn add ng-zorro-antd
 ```
 
 If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).
 
-### Import in Browser
-
-Add `script` and `link` tags in your browser and use the global variable `antd`.
-
-We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `antd/dist` in antd's npm package. You can also download these files directly from [![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd) or [unpkg](https://unpkg.com/).
-
-> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
-
-## Usage
-
-```jsx
-import { DatePicker } from 'antd';
-ReactDOM.render(<DatePicker />, mountNode);
-```
-
-And import stylesheets manually:
-
-```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
-```
-
-### Use modularized antd
-
-- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
-
-   ```js
-   // .babelrc or babel-loader option
-   {
-     "plugins": [
-       ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
-     ]
-   }
-   ```
-
-   > Note: Don't set `libraryDirectory` if you are using webpack 1.
-
-   This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
-
-   ```jsx
-   // import js and css modularly, parsed by babel-plugin-import
-   import { DatePicker } from 'antd';
-   ```
-
-- Manually import
-
-   ```jsx
-   import DatePicker from 'antd/lib/date-picker';  // for js
-   import 'antd/lib/date-picker/style/css';        // for css
-   // import 'antd/lib/date-picker/style';         // that will import less
-   ```
-
-### TypeScript
-
-- Don't use @types/antd, as antd provides a built-in ts definition already.
-
-## Links
-
-- [Home Page](http://ant.design/)
-- [Components](/docs/react/introduce)
-- [Ant Design Pro](http://pro.ant.design/)
-- [Change Log](/changelog)
-- [Scaffold Market](http://scaffold.ant.design)
-- [rc-components](http://react-component.github.io/)
-- [Mobile UI](http://mobile.ant.design)
-- [Motion](https://motion.ant.design)
-- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
-- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
-- [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [Customize Theme](/docs/react/customize-theme)
 
 ## Companies using antd
 
-- [Ant Financial](http://www.antfin.com/index.htm?locale=en_US)
 - [Alibaba](http://www.alibaba.com/)
-- [Tencent](http://www.tencent.com)
-- [Baidu](http://www.baidu.com)
-- [Koubei](http://www.koubei.com/)
-- [Meituan](http://www.meituan.com)
-- [Didi](http://www.xiaojukeji.com/)
-- [Eleme](https://www.ele.me/)
+- [Aliyun](http://www.aliyun.com/)
 
-> If your company or product uses Ant Design, let us know [here](https://github.com/ant-design/ant-design/issues/477)!
+> If your company or product uses NG-ZORRO, let us know [here](https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142)!
 
 ## Contributing
 
-Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first.
+Please read our [CONTRIBUTING.md](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md) first.
 
-If you'd like to help us improve antd, just create a [Pull Request](https://github.com/ant-design/ant-design/pulls). Feel free to report bugs and issues [here](http://new-issue.ant.design/).
+If you'd like to help us improve ng-zorro-antd, just create a [Pull Request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls). Feel free to report bugs and issues [here](http://ng.ant.design/issue-helper/#/new-issue).
 
 > If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
 
 ## Need Help?
 
-For questions on how to use antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/antd) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) as well.
+For questions on how to use antd, please post questions to [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/ng-zorro) using the `antd` tag. If you're not finding what you need on stackoverflow, you can find us on [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd) as well.
 
-As always, we encourage experienced users to help those who are not familiar with `antd`!
+As always, we encourage experienced users to help those who are not familiar with `ng-zorro-antd`!
diff --git a/docs/introduce.zh-CN.md b/docs/introduce.zh-CN.md
index 41e5599f618..f8788f86ed5 100755
--- a/docs/introduce.zh-CN.md
+++ b/docs/introduce.zh-CN.md
@@ -28,22 +28,17 @@ title: Ant Design of Angular
 ## 特性
 
 - 提炼自企业级中后台产品的交互语言和视觉风格。
-- 开箱即用的高质量 React 组件。
+- 开箱即用的高质量 Angular 组件。
 - 使用 TypeScript 构建，提供完整的类型定义文件。
-- 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。
 
 ## 支持环境
 
-* 现代浏览器和 IE9 及以上（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
-* 支持服务端渲染。
-* [Electron](http://electron.atom.io/)
+* 现代浏览器和 IE9 及以上（需要 [polyfills](https://angular.io/guide/browser-support)）。
 
 ## 版本
 
-- 稳定版：[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-- 预览版：[![npm (next)](https://img.shields.io/npm/v/antd/next.svg?style=flat-square)](https://www.npmjs.org/package/antd)
+- [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd)
 
-你可以订阅：https://github.com/ant-design/ant-design/releases.atom 来获得稳定版发布的通知。
 
 ## 安装
 
@@ -52,103 +47,39 @@ title: Ant Design of Angular
 **我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
 
 ```bash
-$ npm install antd --save
+$ npm install ng-zorro-antd --save
 ```
 
 ```bash
-$ yarn add antd
+$ yarn add ng-zorro-antd
 ```
 
 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
 
-### 浏览器引入
+## 标准开发
 
-在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。
+实际项目开发中，你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求，我们强烈推荐官方的 `@angular/cli` 工具链辅助进行开发。
+> 如果你想了解更多CLI工具链的功能和命令，建议访问 [Angular CLI](https://github.com/angular/angular-cli) 了解更多
 
-我们在 npm 发布包内的 `antd/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![CDNJS](https://img.shields.io/cdnjs/v/antd.svg?style=flat-square)](https://cdnjs.com/libraries/antd)
- 或 [UNPKG](https://unpkg.com/antd/dist/) 进行下载。
-
-> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
-
-## 示例
-
-```jsx
-import { DatePicker } from 'antd';
-ReactDOM.render(<DatePicker />, mountNode);
-```
-
-引入样式：
-
-```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
-```
-
-### 按需加载
-
-下面两种方式都可以只加载用到的组件。
-
-- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。
-
-   ```js
-   // .babelrc or babel-loader option
-   {
-     "plugins": [
-       ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
-     ]
-   }
-   ```
-
-   > 注意：webpack 1 无需设置 `libraryDirectory`。
-
-   然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
-
-   ```jsx
-   // babel-plugin-import 会帮助你加载 JS 和 CSS
-   import { DatePicker } from 'antd';
-   ```
-
-- 手动引入
-
-   ```jsx
-   import DatePicker from 'antd/lib/date-picker';  // 加载 JS
-   import 'antd/lib/date-picker/style/css';        // 加载 CSS
-   // import 'antd/lib/date-picker/style';         // 加载 LESS
-   ```
 
 ## 链接
 
-- [首页](http://ant.design/)
-- [组件库](/docs/react/introduce)
-- [Ant Design Pro](http://pro.ant.design/)
-- [更新日志](/changelog)
-- [脚手架市场](http://scaffold.ant.design)
-- [React 底层基础组件](http://react-component.github.io/)
-- [移动端组件](http://mobile.ant.design)
-- [动效](https://motion.ant.design)
-- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
-- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
-- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
-- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
-- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
-- [定制主题](/docs/react/customize-theme)
+- [首页](http://ng.ant.design)
+- [Angular官方文档](https://angular.io/)
+- [开发脚手架](https://cli.angular.io/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [RxJS](https://github.com/ReactiveX/rxjs)
 
 ## 谁在使用
 
-- [蚂蚁金服](http://www.antfin.com/)
 - [阿里巴巴](http://www.alibaba.com/)
-- [腾讯](http://www.tencent.com)
-- [百度](http://www.baidu.com)
-- [口碑](http://www.koubei.com/)
-- [美团](http://www.meituan.com)
-- [滴滴](http://www.xiaojukeji.com/)
-- [饿了么](https://www.ele.me/)
+- [阿里云](http://www.aliyun.com/)
 
-> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
+> 如果你的公司和产品使用了 NG-ZORRO，欢迎到 [这里](https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142) 留言。
 
 ## 如何贡献
 
-在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls)，或给我们 [报告 Bug](http://ng.ant.design/issue-helper/#/new-issue)。
 
 > 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
 
@@ -156,9 +87,8 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 
 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
 
-通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
+通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `ng-zorro` 标签。
 
-1. [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](http://stackoverflow.com/questions/tagged/antd)（English）
-2. [<img alt="Segment Fault" src="http://static.segmentfault.com/global/img/logo.svg" width="100" />](https://segmentfault.com/t/antd)（中文）
-3. [![Gitter](https://badges.gitter.im/ant-design/ant-design-english.svg)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) (English)
-4. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)（中文）
+1. [<img alt="Stack Overflow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="140" />](https://stackoverflow.com/questions/tagged/ng-zorro)（English）
+2. [<img alt="Segment Fault" src="http://static.segmentfault.com/global/img/logo.svg" width="100" />](https://segmentfault.com/t/ng-zorro)（中文）
+3. [![Gitter](https://img.shields.io/gitter/room/ng-zorro/ng-zorro-antd.svg?style=flat-square)](https://gitter.im/ng-zorro/ng-zorro-antd)
diff --git a/docs/recommendation.en-US.md b/docs/recommendation.en-US.md
index 1456c4f555c..808a435708e 100644
--- a/docs/recommendation.en-US.md
+++ b/docs/recommendation.en-US.md
@@ -3,44 +3,26 @@ order: 7
 title: Third-Party Libraries
 ---
 
-`antd` is designed to provide high-quality React UI components which follow the Ant Design Specification. So, we are not going to implement other functions which are not relative to `antd`'s target, and recommend using the excellent third-party library which have come from the React community:
+## Tools
 
 Category | Recommended Components
 ---------|-----------------------
-Router | [react-router](https://github.com/ReactTraining/react-router)
-Layout | [react-blocks](http://whoisandy.github.io/react-blocks/)
-Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd)  [react-draggable](https://github.com/mzabriskie/react-draggable)
-Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2)
-Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill)  [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor](https://github.com/leejaen/react-lz-editor)(Ant Design style)
-Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
-Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media)
-Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
-Document head manager | [react-helmet](https://github.com/nfl/react-helmet) [react-document-title](https://github.com/gaearon/react-document-title)
-Icons | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons)
-QR Code | [qrcode.react](https://github.com/zpao/qrcode.react)
-Charts | [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [victory](https://github.com/FormidableLabs/victory)
-Top Progress Bar | [nprogress](https://github.com/rstacruz/nprogress)
-i18n | [react-intl](https://github.com/yahoo/react-intl)
-Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
-Markdown renderer | [react-markdown](http://rexxars.github.io/react-markdown/)
-Infinite Scroll | [react-virtualized](https://github.com/bvaughn/react-virtualized)
-Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap)
-Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
+Scaffold  |[NG ALAIN](http://ng-alain.com/)
+Charts |[Viser-NG](https://viserjs.github.io/docs.html)
+Charts |[NGX-CHARTS](https://swimlane.github.io/ngx-charts/)
+Dag |[NGX-CHARTS-DAG](https://swimlane.github.io/ngx-graph/)
+Drag |[NGX-DND](https://swimlane.github.io/ngx-dnd/)
+Infinite Scroll|[NGX-INFINITE-SCROLL](https://github.com/orizens/ngx-infinite-scroll)
+CLI |[Angular CLI](https://cli.angular.io/)
+Debug |[Angular Augury](https://augury.angular.io/)
+Server Render |[Angular Universal](https://universal.angular.io/)
 
-<style>
-.markdown table td:first-child {
-  font-weight: 500;
-  width: 25%;
-  background: #fcfcfc;
-}
-.markdown table td > a:not(:last-child) {
-  margin-right: 18px;
-}
-.markdown table td > a:not(:last-child):after {
-  content: '|';
-  color: #bbb;
-  margin: 0 6px 0 8px;
-  pointer-events: none;
-  position: absolute;
-}
-</style>
+
+## Blog & Website
+
+- [Angular](https://angular.io/)
+- [Angular Blog](https://blog.angular.io/)
+- [Angular Weekly Meeting Notes](http://g.co/ng/weekly-notes)
+- [ThoughtRam Blog](https://blog.thoughtram.io/)
+- [Mgechev Blog](http://blog.mgechev.com/)
+- [Angular In Depth](https://blog.angularindepth.com/)
\ No newline at end of file
diff --git a/docs/recommendation.zh-CN.md b/docs/recommendation.zh-CN.md
index 049291e06cd..960566413a8 100644
--- a/docs/recommendation.zh-CN.md
+++ b/docs/recommendation.zh-CN.md
@@ -1,46 +1,34 @@
 ---
 order: 7
-title: 社区精选组件
+title: 社区推荐
 ---
 
-`antd` 是 Ant Design 设计规范的 React 实现，所以我们倾向于只提供符合该规范、且带有视觉展现的 UI 组件，也尽量不重复造轮子。我们推荐使用以下社区已有的优秀实现，与 antd 形成互补：
+`ng-zorro-antd` 是 Ant Design 设计规范的 Angular 实现，我们推荐使用以下社区已有的优秀实现和网站，希望能为你的开发过程提供帮助。
 
-类型 | 推荐组件
-----|--------
-路由 | [react-router](https://github.com/ReactTraining/react-router)
-布局 | [react-blocks](https://github.com/whoisandy/react-blocks)
-拖拽 | [react-dnd](https://github.com/gaearon/react-dnd) [react-draggable](https://github.com/mzabriskie/react-draggable)
-代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2)
-富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor](https://github.com/leejaen/react-lz-editor)（Ant Design 风格） [braft-editor](https://github.com/margox/braft-editor)
-拾色器 | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
-响应式 | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media)
-复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
-页面 meta 属性 | [react-helmet](https://github.com/nfl/react-helmet) [react-document-title](https://github.com/gaearon/react-document-title)
-图标 | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons)
-二维码  | [qrcode.react](https://github.com/zpao/qrcode.react)
-可视化图表 | [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [victory](https://github.com/FormidableLabs/victory)
-顶部进度条 | [nprogress](https://github.com/rstacruz/nprogress)
-应用国际化 | [react-intl](https://github.com/yahoo/react-intl)
-代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
-Markdown 渲染 | [react-markdown](http://rexxars.github.io/react-markdown/)
-无限滚动 | [react-virtualized](https://github.com/bvaughn/react-virtualized)
-地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap)
-Emoji | [emoji-mart](https://github.com/missive/emoji-mart)
+## 工具及解决方案
+
+类型 | 名称 | 描述
+----|----|--------
+脚手架|[NG ALAIN](http://ng-alain.com/) | 基于 `ng-zorro-antd` 的 Admin 系统解决方案
+可视化|[Viser-NG](https://viserjs.github.io/docs.html) | G2 的 Angular 版本的官方实现
+可视化|[NGX-CHARTS](https://swimlane.github.io/ngx-charts/) | 基于 D3 的Angular 可视化组件库
+可视化|[NGX-CHARTS-DAG](https://swimlane.github.io/ngx-graph/) | 基于 Dagre 的有向无环图可视化组件库
+拖拽|[NGX-DND](https://swimlane.github.io/ngx-dnd/) | Angular 的拖拽组件库
+无限滚动|[NGX-INFINITE-SCROLL](https://github.com/orizens/ngx-infinite-scroll) | 无限滚动组件
+打包 |[Angular CLI](https://cli.angular.io/) | Angular 的配套打包工具
+调试|[Angular Augury](https://augury.angular.io/) | Angular Chrome 调试工具
+服务端渲染|[Angular Universal](https://universal.angular.io/) | Angular服务端渲染工具
+
+## 博客及网站
+- [Angular中文官网](https://angular.cn/)
+- [Angular英文官网](https://angular.io/)
+- [Angular官方博客](https://blog.angular.io/)
+- [Angular Weekly Meeting Notes](http://g.co/ng/weekly-notes)
+- [ThoughtRam Blog](https://blog.thoughtram.io/)
+- [Mgechev Blog](http://blog.mgechev.com/)
+- [NgFans](http://www.ngfans.net)
+- [Angular In Depth](https://blog.angularindepth.com/)
+- [30 天精通 RxJS](https://ithelp.ithome.com.tw/users/20103367/ironman/1199)
+- [RxJS 中文社区](https://github.com/RxJS-CN)
+- [Angular News](https://zhuanlan.zhihu.com/angular-news)
 
-<style>
-.markdown table td:first-child {
-  font-weight: 500;
-  width: 20%;
-  background: #fcfcfc;
-}
-.markdown table td > a:not(:last-child) {
-  margin-right: 18px;
-}
-.markdown table td > a:not(:last-child):after {
-  content: '|';
-  color: #bbb;
-  margin: 0 6px 0 8px;
-  pointer-events: none;
-  position: absolute;
-}
-</style>
diff --git a/package.json b/package.json
index c6679a47328..5fecc031f9a 100644
--- a/package.json
+++ b/package.json
@@ -4,22 +4,22 @@
   "license": "MIT",
   "description": "An enterprise-class UI components based on Ant Design and Angular",
   "scripts": {
+    "site:start": "node site_scripts/generate-site init && ng serve --port 0 --open",
     "site:init": "node site_scripts/generate-site init",
     "site": "node site_scripts/generate-site",
     "ng": "ng",
     "start": "ng serve",
     "build": "node site_scripts/generate-site init && ng build",
-    "doc": "node site_scripts/generate-site init && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer",
+    "doc": "npm run site:init && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod --build-optimizer",
     "helper": "bash ./release-helper.sh",
     "generate": "bash ./build.sh",
-    "release": "npm run generate && ng build --prod && npm run helper",
+    "pre-release": "npm run site:init && bash ./build_scripts/replace-publish.sh && npm run generate && ng build --prod && npm run helper",
     "test": "node site_scripts/generate-site init && ng test --single-run --code-coverage",
     "integration": "npm run generate && bash ./integration-test.sh",
     "integration-cli": "npm run generate && cd integration/angular-cli && npm run integration",
     "integration-webpack": "npm run generate && cd integration/webpack && npm run integration",
     "integration-rollup": "npm run generate && cd integration/rollup && npm run integration",
-    "lint": "tslint -c tslint.json 'components/*/*.ts'",
-    "e2e": "ng e2e"
+    "lint": "tslint -c tslint.json 'components/*/*.ts'"
   },
   "main": "./bundles/antd.umd.js",
   "module": "./esm5/antd.js",
diff --git a/release-helper.sh b/release-helper.sh
new file mode 100644
index 00000000000..b0c48755f7e
--- /dev/null
+++ b/release-helper.sh
@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+rm -rf issue-helper && rm -rf ./dist/issue-helper && git clone https://github.com/NG-ZORRO/issue-helper.git && cp -R issue-helper/issue-helper ./dist/
+rm -rf issue-helper
+# download 0.5.x
+rm -rf ./dist/version && mkdir ./dist/version && cd ./dist/version && git clone https://github.com/NG-ZORRO/0.5.5-doc.git 0.5.x
diff --git a/rollup.config.js b/rollup.config.js
index 3bc9b1e0c38..bbb83295045 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -113,7 +113,9 @@ let globals = {
   'rxjs/operators/debounceTime'        : 'Rx.Observable.prototype',
   'rxjs/operators/delay'               : 'Rx.Observable.prototype',
   'rxjs/operators/distinctUntilChanged': 'Rx.Observable.prototype',
+  'rxjs/operators/distinct'            : 'Rx.Observable.prototype',
   'rxjs/operators/do'                  : 'Rx.Observable.prototype',
+  'rxjs/operators/take'                : 'Rx.Observable.prototype',
   'rxjs/operators/filter'              : 'Rx.Observable.prototype',
   'rxjs/operators/finally'             : 'Rx.Observable.prototype',
   'rxjs/operators/first'               : 'Rx.Observable.prototype',
diff --git a/site_scripts/_site/src/app/app.component.html b/site_scripts/_site/src/app/app.component.html
index 0115ce361ef..b39e0e4385c 100644
--- a/site_scripts/_site/src/app/app.component.html
+++ b/site_scripts/_site/src/app/app.component.html
@@ -20,6 +20,9 @@
           </nz-select>
         </div>
         <button nz-button nzGhost nzSize="small" class="header-lang-button" (click)="switchLanguage(language==='zh'?'en':'zh')">{{language=='zh'?'English':'中文'}}</button>
+        <nz-select nzSize="small" class="version" style="width: 68px;" [(ngModel)]="currentVersion" (ngModelChange)="navigateToVersion($event)">
+          <nz-option *ngFor="let version of versionList" [nzLabel]="version" [nzValue]="version"></nz-option>
+        </nz-select>
         <ul nz-menu [nzMode]="'horizontal'" id="nav">
           <li nz-menu-item nzSelected>
             <a routerLink="/doc/introduce/zh" *ngIf="language=='zh'"><span>组件</span></a>
diff --git a/site_scripts/_site/src/styles.less b/site_scripts/_site/src/styles.less
index 518069b5521..8544b603da1 100644
--- a/site_scripts/_site/src/styles.less
+++ b/site_scripts/_site/src/styles.less
@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@import "../../components/ng-zorro.less";
+@import "../../components/ng-zorro-antd.less";
 @import "./style/index";
 @import "./theme";
diff --git a/site_scripts/_site/src/tsconfig.app.json b/site_scripts/_site/src/tsconfig.app.json
index 071cb458365..8ca45b987fc 100644
--- a/site_scripts/_site/src/tsconfig.app.json
+++ b/site_scripts/_site/src/tsconfig.app.json
@@ -8,7 +8,7 @@
       "node"
     ],
     "paths": {
-      "ng-zorro-antd": [ "../../components" ]
+      "ng-zorro-antd": [ "../../components/ng-zorro-antd.module.ts" ]
     }
   },
   "exclude": [