[Angular] 使用 ng-alain

[Angular] 使用 ng-alain

ng-alain，一个阿里的 angular 脚手架。基于 ng-zorro ，进行再次封装。

这里记录一些如何生成一个 ng-alain 项目，以及如何使用 ng-alain 和后端（springboot）交互。

使用命令行新建

新建空项目

ng new my-project --style less --routing
cd my-project
ng add ng-alain

这里需注意 Angular Cli 版本为 9.x

新建页面

这是ng-alain感觉很方便的一点，可以通过命令行创建模块和页面，页面ng-alain还内置了几种模板（查看、编辑等）。

模块

ng g ng-alain:module sys

CLI 会自动在 src/app/routes/sys 下创建 sys.module.ts 和 sys-routing.module.ts 文件。前者是系统设置模块组件定义文件，后者是系统设置模块路由配置文件。

为了使模块跟主模块产生联系，还会在src/app/routes/routes-routing.module.ts 文件内注册新建的业务模块。

页面

业务页

目前包含的业务组件页，包括：

• empty 空白页
• list 列表页
• edit 编辑页
• view 查看页
• curd 列表、编辑、查看

例如：在 trade 模块下生成 list 列表页：

ng g ng-alain:list list -m=trade

注意： -m 是必须指定的，因为 ng-alain 认为页面应该在某个具体的模块里，而不是幽灵。

骚操作

一般而言，一个模块可能会包含相同类型的业务页，而我们产生的文件结构可能希望是：

sys
  log
    view
      view.component.ts
    log.component.ts
  sys.module.ts

因此，当希望生成的查看应该是在 log 组件（支持 log/list 多级写法）下面时，你可以这样子：

ng g ng-alain:view view -m=sys -t=log

edit & view 页

对于 edit、view 默认是以模态框展示来生成，可以改用页面展示则：

ng g ng-alain:edit [page name] --modal=false

使用11.1.0

前端更新的太快了，不知不觉ng-alain就已经11了。我也很眼馋ng-alain新版本中的新特性，不过要升级感觉跨的版本有点多（之前是8，感觉会有很多坑），就重新搭建一个吧。

这里根据官网的教程来走的。

安装

先清除npm的缓存

npm cache clean --force

npm的速度，用过的都知道，设置淘宝源

# 设置淘宝源
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass
# 恢复默认源
npm config delete registry
npm config delete sass_binary_site

安装 Angular Cli

npm install -g @angular/cli

创建 ng-alain 项目

ng new my-project --style less --routing

当提示 Packages installed successfully. 表示创建成功，接下来只需要将 NG-ALAIN 添加到 my-project 项目中即可，在 my-project 目录下 通过终端窗口中运行：

ng add ng-alain

运行

npm start

报错

我这里发生了很多诡异的问题，实在不想挨个去解决，所以直接用了github上面的demo。再把node_modules 拷贝到之前新建的项目里，跑起来了…

git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project
cd my-project
npm install

前后端对接

后端使用的是 springboot

跨域问题

大部分应用都会前后端分离进行开发，这导致当对后端发起一个请求时会受跨域（CORS）的因素，例如：

http.get(`http://192.168.1.100/api/app`).subscribe();

注：如果非 http 开头的请求，会在每个请求都会加上 environment.SERVER_URL 作为请求 URL 的前缘。

直接返回以下错误：

Access to XMLHttpRequest at 'http://192.168.1.100/api/app' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

而正常解决跨域问题有两种方法，一是让后端开发环境直接支持跨域请求（不推荐，但最简单），二是利用 Angular Cli 提供代理支持，开发代理服务器会将 Angular 发送的请求的域和端口转发给后端服务器，CORS 是浏览器的安全限制，在代理服务器与后端服务器之前并不存在 CORS 的问题，这也就是为什么很多人会尝试明明在 Postman 能请求，而在 Angular 下无法请求的原因所在。

假定所有后端请求都是以 /api 为前缀时，就可以在 proxy.conf.json 配置所有这个前缀都转向新的后端，例如：

{
  "/api": {
    "target": "http://192.168.1.100/api",
    "secure": false
  }
}

• /api 代理路径，不支持域
• target 代理目标地址
• secure 代理目标地址如果是 https 应该设置为 true，反之为 false
• pathRewrite 重写地址，例如 pathRewrite: {'^/api': '/'} 将前缀 /api 转为 /
• changeOrigin 将主机标头的 host 更改为目标URL，有些后端会根据其值来判断是否有效，可能需要通过设置 true
• logLevel 设置为 debug 可以终端显示代理转发的消息

更多使用说明请参考代理到后端服务器，以及配置描述请参考http-proxy-middleware options。

除了修改 proxy.conf.json 外，还需要修改 environment.ts 中的 SERVER_URL

proxy.conf.json

{
    "/api/*": {
        "target": "http://localhost:8080/",
        "secure": false,
        "logLevel": "debug",
        "pathRewrite": {"^/api" : ""}
    }
}

environment.ts

export const environment = {
  SERVER_URL: `/api`,
  production: false,
  useHash: true,
};

其他

我这里还写了一篇，关于具体控件使用的：https://blog.csdn.net/BlackParade/article/details/108983167