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)

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

项目准备

1. 官方网址下载ABP实例代码

   
   
   

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

   目录.png

安装npm包

1. 在命令行切换到angular项目中，运行 yarn add
2. 在命令行切换到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信息

---

我的公众号

我的公众号

---

源代码

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