52ABP前端升級2.0.x指南

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
• 菜單佈局優化

新版本能夠經過 官網 或者 github 直接下載。

升級教程正式開始

一、升級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
  複製代碼

二、新增/替換 前端項目文件

從 官網 或者 github 下載 4.0.0 的代碼，將這裏面的部份內容替換到原有項目中

注意 : 替換文件時請確認是否有自定義功能已添加,替換前請注意備份

account

• 替換 文件 src/account/account.module.ts
• 替換 文件 src/account/login/login.component.html
• 替換 文件 src/account/login/login.component.less
• 替換 文件 src/account/register/register.component.html
• 替換 文件 src/account/tenant/tenant-change-modal.component.html
• 替換 文件 src/account/tenant-register/tenant-register.component.html

app

• 替換 文件 src/app/app.component.html
• 替換 文件 src/app/app.component.ts
• 參照修改 文件 src/app/AppMenus.ts
• 替換 文件 src/app/home/home.component.html
• 替換 文件夾(目錄) src/app/layout

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

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

---

以上步驟執行完成以後便可成功升級到ng-zorro1.8.x + ng-alian 2.0

若有疑問或發生問題請加入qq羣：633751348

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