前言
本篇内容为指导从 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
- 菜单布局优化
新版本可以通过 码云 直接下载
升级教程正式开始
1、升级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
2、新增/替换/删除 前端项目文件
从 码云下载 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
转载请注明原文链接和作者名称