介绍
ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)
项目准备
-
官方网址下载ABP实例代码
下载ABP项目.png - 克隆ng-alain项目，将克隆下来的项目复制到abp模板项目跟目录，和angular平级
命令：git clone --depth 1 https://github.com/cipchk/ng-alain.git
目录.png
安装npm包
- 在命令行切换到angular项目中，运行
yarn add - 在命令行切换到abpalain项目中，运行
npm install，该项目只能使用npm命令，cnpm会导致运行报错
修改abpalain项目端口
由于abpalain项目默认启动端口4200，与angualr冲突，这里讲abpalain的端口修改为4201，找到abpalain项目下的package.json文件，修改start命令，修改结果如下
运行端口.png
项目修改之后，需要添加后端的cors，找到AbpAlain.Web.Host项目中
appsettings.json文件，在CorsOrigins中添加http://localhost:4201修改结果如下
cors.png
经过以上的端口修改，可以保存abp-alain项目能够访问到后端项目
引入abp包
找到abpalain项目的package.json文件，在dependencies节点添加和abp有关的包文件,如下图，红色标记的是需要添加的
abp依赖.png
添加包文件之后，运行npm install 命令进行安装
总结
经过以上步骤，项目已准备完毕，下来正式进入ng-alain的改造工作，主要是参考angular项目，修改 ng-alain项目，下篇主要介绍的是ng-alain正常启动并且正常获取abp信息
我的公众号
我的公众号
