由于现在网络上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-cli npm uninstall --save-dev angular-cli
在全局安装最新版本的cli包：
npm uninstall -g @angular/cli npm cache clean npm 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@latest npm install
如果你完成了上面的操作，你可以打开package.json来看到你项目中的cli版本已经更换到了最新版本了。
在使用ng-zorro的过程中，需要注意两点：
Ng-zorro并不能一次引入在多组件里进行使用，如果你的项目中存在子module，相关的依赖包需要在子module里进行引入。需要注意的是，你必须在module里通过forRoot()方法去使用。
//主module imports: [ BrowserModule, FormsModule, HttpClientModule, NgZorroAntdModule.forRoot(), BrowserAnimationsModule ]
在子module里，就不再需要forRoot()方法了:
//子module imports: [ CommonModule, HttpClientModule, NgZorroAntdModule ]
当你引入了所需的这些文件后，你就可以开始使用ng-zorro了。
章节二：angular 4 引入路由 => 组件模块化#module模块化 => 路由模块化（路由按需加载）
2.1 angular 4 引入路由
import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { RouterModule, Routes } from '@angular/router'; import {HashLocationStrategy , LocationStrategy} from '@angular/common'; import { HTTP_INTERCEPTORS } from '@angular/common/http';
//主module imports: [ BrowserModule, FormsModule, HttpClientModule, NgZorroAntdModule.forRoot(), BrowserAnimationsModule ]
//子module imports: [ CommonModule, HttpClientModule, NgZorroAntdModule ],
angular 导入module了之后，一般情况下会将路由单独放在一个文件中进行引入。你需要在主module中进行引入，然后在主module里进行导出，如果你有子module，那么你需要在子module中进行导入，在子module中进行导出，因为Routermodule作为作为管理路由的工作，会将多个模板导入到同一模板中。如果你的项目中需要将路由文件拆分或者如要按需加载与懒加载相关功能，那么这时候你可能需要将路由进行相互关联，在Vue中你可以通过ES6的一些语法进行链接，而angular 4提供了loadChildren来进行响应的相应的链接。具体的代码如下：
imports: [ BrowserModule, FormsModule, HttpClientModule, NgZorroAntdModule.forRoot(), BrowserAnimationsModule, EventAnalysisModule, RouterModule.forRoot( appRoutes ) ], exports: [ RouterModule ],