一个Angular的开发脚手架（求星星）

Posted 2021-04-26 小虎Oni

Oniangular

实际解决问题

1. Angular2 项目上线（常用的是编译成静态文件之后，放到nginx tomcat等服务下）

2. Angular2 http请求代理（拦截请求做一些处理）

3. Angular2 项目跨域访问

4. koa2中转服务器（简单的koa2项目，也可以使用koa2-proxy。这个看起来比较像koa2项目。）

需求说明

我们的服务端，要求我自己搭建一个中转服务器。 
因为app端的请求，我们都是依赖于token，而且这个token是不变的。 
之前都是服务端保存session数据，进行用户身份认证的。现在服务端不想单独为了web端做这些工作， 
希望和app端使用一样的方式。所以需要前段自己搭建一个中转服务器，用于处理跨域访问和tokon的问题。 
此项目脚手架使用的Angular CLI version 1.5.3.创建。 
在koa中对token这些数据做处理，再进行代理，将所有的http请求中转到实际的服务器api。

特别说明

1、在开发环境使用ng serve启用了ng开发服务，监听的是4200端口。 
然后我们使用koa2搭建一个node服务器，监听1336端口。 
使用koa-proxy2将请求中转到真实业务的服务端。 
在 
app.use(async(ctx, next) => { 
console.log(Process ${JSON.stringify(ctx.request.method)} ${ctx.request.url}...); 
//这里可以处理请求中转到服务器之前，操作一下token和参数之类的。 
await next(); 
//可以在这里处理从服务端返回的数据 
}); 
因为开发时请求从4200访问1336所以也存在跨域访问问题。 
所以在koa2中加入koa2-cors处理了跨域访问。 
2、在生产环境或者称为正式上线时。修改src\app\config\td-config.ts中的this.serveUrl = ''。 
使用ng build将前端页面编译成静态文件。 
将src\dist目录和koa-proxy.js（如果有修改的话）复制到build中。 
拷贝build中的文件到远程服务器上，安装node环境和nodemon， 
执行npm install再执行nodemon koa-proxy。

使用方法

开发

0、gitclone 本项目 
1、执行 npm i. 
2、确认src\app\config\td-config.ts文件中的端口号和koa-proxy.js中的端口号相同。 
2、执行 ng serve 启动一个angular开发服务。 
3、执行 nodemon koa-proxy 开启中转服务器。

生产

0、修改src\app\config\td-config.ts中的this.serveUrl = ''。 
1、执行 ng build 编译项目。 
2、拷贝src\dist文件夹和 koa-proxy.js文件到src\build目录下。 
3、拷贝build中的文件到远程服务器上，安装node环境和nodemon。 
4、执行npm install再执行nodemon koa-proxy.

说明

UI框架使用NG-ZORRO 
NG-ZORRO是Ant Design 的 Angular^5.0.0 实现，开发和服务于企业级后台产品。

BUG和建议

请提交到ISS:https://github.com/xiaohuoni/angular/issues

点击阅读原文直达github哦！