写在前面
由于现在网络上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()方法去使用。