chore: deprecate NgZorroAntdModule (#4519)

* chore: deprecate `NgZorroAntdModule`

* docs: update README.md and getting-started.md

* chore: update schematics

* docs: update link

* chore: update stackblitz data

* docs: update link

* chore: update stackblitz data

* chore: remove `NgZorroAntdModule.forRoot()` API

BREAKING CHANGE:

Removed deprecated API `NgZorroAntdModule.forRoot()`

* docs: update README.md and getting-started.md

* chore: fix tslint hook

* style: fix lint

* build: fix generate-iframe script

* style: fix lint

README-zh_CN.md

@@ -70,13 +70,13 @@ $ ng add ng-zorro-antd
 
 ## 🔨 使用
 
-在每一个需要使用组件的 module 中引入 `NgZorroAntdModule`。
+将想要使用的组件模块引入到你的 `app.module.ts` 文件和其它的[特性模块](https://angular.cn/guide/feature-modules)中。
 
 ```ts
-import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @NgModule({
-  imports: [ NgZorroAntdModule ]
+  imports: [ NzButtonModule ]
 })
 export class AppModule {
 }

README.md

@@ -79,13 +79,13 @@ $ npm install ng-zorro-antd
 
 ## 🔨 Usage
 
-Import the module into every module where you want to use the components.
+Import the component modules you want to use into your `app.module.ts` file and [feature modules](https://angular.io/guide/feature-modules).
 
 ```ts
-import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @NgModule({
-  imports: [ NgZorroAntdModule ]
+  imports: [ NzButtonModule ]
 })
 export class AppModule {
 }

components/affix/doc/index.en-US.md

@@ -12,10 +12,6 @@ When user browses a long web page, some content need to stick to the viewport. T
 
 Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzAffixModule } from 'ng-zorro-antd/affix';
 ```

components/affix/doc/index.zh-CN.md

@@ -13,10 +13,6 @@ title: Affix
 
 页面可视范围过小时，慎用此功能以免遮挡页面内容。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzAffixModule } from 'ng-zorro-antd/affix';
 ```

components/alert/doc/index.en-US.md

@@ -11,10 +11,6 @@ Alert component for feedback.
 - When you need to show alert messages to users.
 - When you need a persistent static container which is closable by user actions.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzAlertModule } from 'ng-zorro-antd/alert';
 ```

components/alert/doc/index.zh-CN.md

@@ -12,10 +12,6 @@ title: Alert
 - 当某个页面需要向用户显示警告的信息时。
 - 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzAlertModule } from 'ng-zorro-antd/alert';
 ```

components/anchor/doc/index.en-US.md

@@ -10,10 +10,6 @@ Hyperlinks to scroll on one page.
 
 For displaying anchor hyperlinks on page and jumping between them.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 ```

components/anchor/doc/index.zh-CN.md

@@ -11,10 +11,6 @@ title: Anchor
 
 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 ```

components/auto-complete/doc/index.en-US.md

@@ -10,10 +10,6 @@ Autocomplete function of input field.
 
 When there is a need for autocomplete functionality.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
 ```

components/auto-complete/doc/index.zh-CN.md

@@ -11,10 +11,6 @@ subtitle: 自动完成
 
 需要自动完成时。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
 ```

components/avatar/doc/index.en-US.md

@@ -6,10 +6,6 @@ title: Avatar
 
 Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 ```

components/avatar/doc/index.zh-CN.md

@@ -7,10 +7,6 @@ title: Avatar
 
 用来代表用户或事物，支持图片、图标或字符展示。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 ```

components/back-top/doc/index.en-US.md

@@ -11,10 +11,6 @@ title: BackTop
 - When the page content is very long.
 - When you need to go back to the top very frequently in order to view the contents.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 ```

components/back-top/doc/index.zh-CN.md

@@ -12,10 +12,6 @@ title: BackTop
 - 当页面内容区域比较长时；
 - 当用户需要频繁返回顶部查看相关内容时。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 ```

components/badge/doc/index.en-US.md

@@ -10,10 +10,6 @@ Small numerical value or status descriptor for UI elements.
 
 Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 ```

components/badge/doc/index.zh-CN.md

@@ -11,10 +11,6 @@ title: Badge
 
 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzBadgeModule } from 'ng-zorro-antd/badge';
 ```

components/breadcrumb/doc/index.en-US.md

@@ -13,10 +13,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 - When the user may need to navigate back to a higher level.
 - When the application has multi-layer architecture.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 ```

components/breadcrumb/doc/index.zh-CN.md

@@ -13,10 +13,6 @@ title: Breadcrumb
 - 当需要告知用户『你在哪里』时；
 - 当需要向上导航的功能时。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 ```

components/button/doc/index.en-US.md

@@ -10,10 +10,6 @@ To trigger an operation.
 
 A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzButtonModule } from 'ng-zorro-antd/button';
 ```

components/button/doc/index.zh-CN.md

@@ -11,10 +11,6 @@ subtitle: 按钮
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzButtonModule } from 'ng-zorro-antd/button';
 ```

components/calendar/doc/index.en-US.md

@@ -11,10 +11,6 @@ Container for displaying data in calendar form.
 
 When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCalendarModule } from 'ng-zorro-antd/calendar';
 ```

components/calendar/doc/index.zh-CN.md

@@ -12,10 +12,6 @@ title: Calendar
 
 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCalendarModule } from 'ng-zorro-antd/calendar';
 ```

components/card/doc/index.en-US.md

@@ -11,10 +11,6 @@ Simple rectangular container.
 
 A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCardModule } from 'ng-zorro-antd/card';
 ```

components/card/doc/index.zh-CN.md

@@ -12,10 +12,6 @@ cols: 1
 
 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCardModule } from 'ng-zorro-antd/card';
 ```

components/carousel/doc/index.en-US.md

@@ -12,10 +12,6 @@ A carousel component. Scales with its container.
 - When there is insufficient content space, it can be used to save space in the form of a revolving door.
 - Commonly used for a group of pictures/cards.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 ```

components/carousel/doc/index.zh-CN.md

@@ -13,10 +13,6 @@ subtitle: 走马灯
 - 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
 - 常用于一组图片或卡片轮播。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 ```
@@ -47,7 +43,7 @@ import { NzCarouselModule } from 'ng-zorro-antd/carousel';
 
 ### InjectionToken
 
-| Token | 说明 | 参数 | 默认值 | 
+| Token | 说明 | 参数 | 默认值 |
 | ----- | --- | ---- | --- |
 | `NZ_CAROUSEL_CUSTOM_STRATEGIES` | 提供用户自定义的切换效果 | `CarouselStrategyRegistryItem[]` | - |
 

components/cascader/doc/index.en-US.md

@@ -12,10 +12,6 @@ Cascade selection box.
 - When selecting from a large data set, with multi-stage classification separated for easy selection.
 - Chooses cascade items in one float layer for better user experience.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 ```

components/cascader/doc/index.zh-CN.md

@@ -13,10 +13,6 @@ subtitle: 级联选择
 - 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
 - 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 ```
@@ -44,7 +40,7 @@ import { NzCascaderModule } from 'ng-zorro-antd/cascader';
 | `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string\|TemplateRef<void>` | - |
 | `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` |
 | `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef<any>` | - |
-| `[nzOptionRender]` | 选项的渲染模板 | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | | 
+| `[nzOptionRender]` | 选项的渲染模板 | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | |
 | `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值，且未提供`nzOptions`值，则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike<any>` | - |
 | `[nzOptions]` | 可选项数据源 | `object[]` | - |
 | `[nzPlaceHolder]` | 输入框占位文本 | `string` | `'请选择'` |

components/checkbox/doc/index.en-US.md

@@ -11,10 +11,6 @@ Checkbox.
 - Used for selecting multiple values from several options.
 - If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 ```

components/checkbox/doc/index.zh-CN.md

@@ -12,10 +12,6 @@ title: Checkbox
 - 在一组可选项中进行多项选择时；
 - 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 ```

components/code-editor/demo/diff.ts

@@ -25,7 +25,7 @@ export class NzDemoCodeEditorDiffComponent {
 @Component({})
 export class SomeComponent {}`;
 
-  code = `import { NzCodeEditorModule } from 'ng-zorro-antd';
+  code = `import { NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
 
 @Component({})
 export class SomeComponent {}`;

components/collapse/doc/index.en-US.md

@@ -12,10 +12,6 @@ A content area which can be collapsed and expanded.
 - Can be used to group or hide complex regions to keep the page clean.
 - `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.
 
-## Import this Component Individually
-
-You can get more detail [here](/docs/getting-started/en#import-a-component-individually).
-
 ```ts
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 ```

components/collapse/doc/index.zh-CN.md

@@ -13,10 +13,6 @@ cols: 1
 - 对复杂区域进行分组和隐藏，保持页面的整洁。
 - `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
 
-## 单独引入此组件
-
-想要了解更多关于单独引入组件的内容，可以在[快速上手](/docs/getting-started/zh#单独引入某个组件)页面进行查看。
-
 ```ts
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 ```