详解关于Angular4 ng-zorro使用过程中遇到的问题

写在前面

由于现在网络上Angular 4的相关技术文档不是很充分，我写出这个采坑的记录文档，一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来，另一方面也想着某些坑大家可能也会遇到，也可以给道友做一个参考。文档中的很多地方多有不足，后期我会慢慢完善，也希望道友们能够及时指出文档中不正确的与可以优化的地方。

我计划将该帮助文档分为4个章节:

章节一：

关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤

章节二：

angular 4 引入路由=> 组件模块化#module模块化=>  路由模块化（路由按需加载）

章节三：

引入拦截器，统一管理请求与相应=>引入http服务进行通讯=>引入service服务与后台进行通讯=>拆分service服务=> 应用观察者模式对数据进行发布与订阅

章节四：

项目打包=>优化

============================= Begin ===============================

章节一：关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤

在使用阿里爸爸推出的Ng-zorro前，希望你先确保本地的angular-cli版本是最新的版本，目前最新的版本为1.6.3（2018/1/10） *兼容问题可能会导致后期项目打包后部门js丢失

如果你本地已经全局安装了cli或者已经使用相对较旧的版本创建了angular 的项目，那么你可以按照下面的命令去更新你本地与项目中的cli版本去兼容ng-zorro：

首先需要先卸载本地的angular-cli安装包：

npm uninstall -g angular-clinpm uninstall --save-dev angular-cli

在全局安装最新版本的cli包：

npm uninstall -g @angular/clinpm cache cleannpm install -g @angular/cli@latest

你可以通过cmd命令行，使用 ng -v 去看到本地目前cli的版本。如果你已经安装了最新的版本，你可以使用新版本的ng命令： [ng new "项目名称" ]来创建一个新的angular 项目。如果你已经有angular项目了，那你需要去更新项目中的cli版本。具体的命令如下：

rmdir -rf node_modules dist npm install --save-dev @angular/cli@latestnpm install

如果你完成了上面的操作，你可以打开package.json来看到你项目中的cli版本已经更换到了最新版本了。

在使用ng-zorro的过程中，需要注意两点：

Ng-zorro并不能一次引入在多组件里进行使用，如果你的项目中存在子module，相关的依赖包需要在子module里进行引入。需要注意的是，你必须在module里通过forRoot()方法去使用。

//主moduleimports: [BrowserModule,FormsModule,HttpClientModule,NgZorroAntdModule.forRoot(),BrowserAnimationsModule]

在子module里，就不再需要forRoot()方法了: