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

轉載請註明原文連接和做者名稱