abp＆ng-alain 改造前端一——项目准备

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

目录:https://www.jianshu.com/p/589af988637c

源代码:https://github.com/ZhaoRd/abp-alain

项目准备

官方网址下载ABP实例代码

克隆ng-alain项目，将克隆下来的项目复制到abp模板项目跟目录，和angular平级 命令：git clone --depth 1 https://github.com/cipchk/ng-alain.git

安装npm包

在命令行切换到angular项目中，运行

在命令行切换到abpalain项目中，运行 ，该项目只能使用npm命令，cnpm会导致运行报错

修改abpalain项目端口

由于abpalain项目默认启动端口4200，与angualr冲突，这里讲abpalain的端口修改为4201，找到abpalain项目下的 文件，修改start命令，修改结果如下

项目修改之后，需要添加后端的cors，找到AbpAlain.Web.Host项目中 文件，在 中添加 修改结果如下经过以上的端口修改，可以保存abp-alain项目能够访问到后端项目

引入abp包

找到abpalain项目的 文件，在 节点添加和abp有关的包文件,如下图，红色标记的是需要添加的

添加包文件之后，运行 命令进行安装

总结

经过以上步骤，项目已准备完毕，下来正式进入ng-alain的改造工作，主要是参考angular项目，修改 ng-alain项目，下篇主要介绍的是ng-alain正常启动并且正常获取abp信息

我的公众号

源代码

源代码:https://github.com/ZhaoRd/abp-alain