52ABP企业版前端升级到2.0.x指南

前言

本篇内容为指导从 yoyo-ng-module 1.x 升级到 yoyo-ng-module 2.x

详细说明

52ABP前端框架采用的是 基于NG-Zorro构建的脚手架 NG-Alian，将其修改并整合到前端模块yoyo-ng-module中

最初支持版本: Angular6 + NG-Zorro(低于1.8)版本 + NG-Alian 1.x

近期因为NG-Zorro 1.8 版本的升级对原有图标的升级是破坏式的，而且NG-Alian也发布了2.0正式版，因而乎近几日也对yoyo-ng-module进行了升级，发布了2.0.1。

升级部分:

• 整合 NG-Alian 2.0与 ABP前端模块
• 支持NG-Zorro 1.8
• 菜单布局优化

新版本能够经过 码云 直接下载

升级教程正式开始

一、升级ng-zorro、yoyo-ng-module

如下命令看我的喜爱使用

• 安装 ng-zorro1.8

  npm命令 :  npm install ng-zorro-antd@1.8.0
  yarn命令:  yarn add ng-zorro-antd@1.8.0
  复制代码

• 安装 yoyo-ng-module 2.0.1

  npm命令 :  npm install yoyo-ng-module@2.0.1
  yarn命令:  yarn add yoyo-ng-module@2.0.1
  复制代码

• 修复 ng-zorro 图标丢失（官方文档连接：点击这里）

  ng g ng-zorro-antd:fix-icon
  复制代码

二、新增/替换/删除 前端项目文件

从 码云下载 4.0.2 的代码，将这里面的部份内容替换到原有项目中

注意 : 替换文件时请确认是否有自定义功能已添加,替换前请注意备份

account

• 替换 文件 src/account/account-routing.module.ts
• 替换 文件 src/account/account.component.html
• 替换 文件 src/account/account.component.less
• 替换 文件 src/account/account.module.ts
• 替换 文件 src/account/login/login.component.html
• 替换 文件 src/account/login/login.component.less
• 替换 文件 src/account/passwords/forgot-password.component.html
• 替换 文件 src/account/passwords/reset-password.component.html
• 替换 文件 src/account/register/register.component.html
• 替换 文件 src/account/register/register.component.less
• 替换 文件 src/account/tenant/tenant-change.component.ts
• 替换 文件 src/account/tenant-rigister/tenant-rigister.component.ts
• 替换 文件 src/account/tenant-rigister/tenant-rigister.component.html
• 替换 文件 src/account/tenant-rigister/tenant-rigister.component.less

app

• 参照修改 文件 src/app/AppMenus.ts
• 替换 文件 src/app/app.component.html
• 替换 文件 src/app/app.component.ts
• 替换 文件 src/app/app.component.less

app/layout

• 删除后复制新的 文件夹(目录) src/app/layout

app/main

• 替换 文件 src/app/main/main-routing.ts
• 替换 文件 src/app/main/main.module.ts
• 替换 文件 src/app/main/dashboard.component.ts
• 替换 文件 src/app/main/dashboard.component.html
• 新增 文件 src/app/main/advertising.component.html
• 新增 文件 src/app/main/advertising.component.ts

app/admin

• 替换 文件 src/app/admin/audit-logs/audit-logs.component.html
• 替换 文件 src/app/admin/audit-logs/audit-logs.component.ts
• 替换 文件 src/app/admin/language-texts/language-texts.component.html
• 替换 文件 src/app/admin/languages/languages.component.html
• 替换 文件 src/app/admin/languages/create-or-edit-language/create-or-edit-language.component.html
• 替换 文件 src/app/admin/organization-units/add-member/add-member.component.ts
• 替换 文件 src/app/admin/roles/roles.component.html
• 替换 文件 src/app/admin/roles/roles.component.ts
• 替换 文件 src/app/admin/tenants/tenants.component.html
• 替换 文件 src/app/admin/users/create-or-edit-user/create-or-edit-user.component.html
• 替换 文件 src/app/admin/users/users.component.html
• 替换 文件 src/app/admin/users/users.component.ts

styles

• 替换 文件 src/styles.less
• 替换 文件 src/styles/index.less
• 替换 文件 src/styles/theme.less
• 新增 文件 src/styles/theme-variable.less
• 新增 文件 src/style-icons-auto.ts
• 新增 文件 src/style-icons.ts

shared

• 替换 文件 src/shared/shared.module.ts
• 新增 文件 src/shared/component-base/index.ts
• 替换 文件 src/shared/service-proxies/serivce-proxies.ts
• 替换 文件 src/shared/service-proxies/serivce-proxies.module.ts
• 删除 文件 src/shared/component-base/分页信息的基类,做为备份.ts
• 删除 文件 src/shared/component-base/弹出模态框的分页信息的基类,做为备份.ts

assets

• 替换 文件 src/assets/appconfig.dev.json
• 替换 文件 src/shared/appconfig.prod.json

其它

• 替换 文件 src/root.module.ts
• 替换 文件 src/root.component.ts
• 替换 文件 src/yoyo.module.ts
• 替换 文件 src/AppPreBootstrap.ts
• 替换 文件 nswag/service.config.nswag

---

以上步骤执行完成以后便可成功升级到ng-zorro1.8.x + ng-alian 2.0,若有遗漏请联系我。

若有疑问或发生问题请加入qq群：633751348

转载请注明原文连接和做者名称