Windows Admin Center 正在升級到 Angular 11.0! 此升級帶來了最新的功能、安全性和性能,我們很高興為您提供它。 到目前為止,Windows Admin Center 的 shell 已升級,輪到你更新擴展了。 按照本文檔中的步驟更新您的擴展。
如果您在此過程中遇到任何問題,請聯繫您的 Microsoft 聯繫人,他們將協助您路由請求。
在開始升級到 Angular 11 之前,您需要使用最新的 Windows Admin Center shell 和開發工具設定您的開發人員環境。 在繼續升級過程之前,請完成以下步驟:
使用升級后的shell在開發模式 ()
msiexec /i WindowsAdminCenter<version>.msi DEV_MODE=1
中安裝最新版本的 Windows Admin Center。 如果尚未向你提供此資訊,請聯繫你的 Microsoft 聯繫人。
(推薦)
在 repo 中創建一個
features/ng11
分支。
(推薦)
將版本更新
version.json
為
(N+1).0.0
。
在 PowerShell 控制台中,確保切換到 Angular 版本的相應 Node 版本(有關更多資訊,請參閱
使用 shell 的兩個分支
瞭解更多詳細資訊)。 對於 Angular 11,請運行
nvm use 12.18.3
. 關閉終端以使此更改生效。
清理
node_modules
資料夾以避免 npm 衝突。
自動升級過程
通過運行
npm install -g @microsoft/windows-admin-center-sdk@experimental
下載並安裝 Windows Admin Center CLI 工具(如果尚未這樣做),然後再繼續執行以下步驟。
在儲存庫的根級別,運行
wac upgrade --audit=false --experimental
.
如果正在處理其他擴展使用的擴充儲存庫,請同時包含該
--library
標誌。
如果使用了 library 標誌,請將該屬性
src/package.json
編輯
name
為擴展獨有的內容。
(視情況而定)
如果擴展存儲庫依賴於任何其他擴展包,則必須手動為該擴展選擇新的 angular 版本(例如,
msft-sme-certificate-manager
依賴於
msft-sme-event-viewer
.自動化工具
不會
更新
msft-sme-event-viewer
版本,必須手動更新。另外,請確保在從擴展導入的任何 '/dist' 資料夾上指定 '/dist' 資料夾級別,任何較低或較高級別的導入都不起作用(例如,
import { foobar } from '@msft-sme/event-viewer'
需要更改為
import { foobar } from '@msft-sme/event-viewer/dist'
.)
開啟
app-routing.module.ts
格式
./folder-name/file-name#ModuleClass
() => import('./folder-name/file-name').then(m => m.ModuleClass)
為 . 如果有任何其他
routing.module.ts
文件,它們也需要以這種方式更新。
刪除
UpgradeAudit.txt
檔案。 它是自動生成的供您參考,但不需要進入存儲庫。
瀏覽以下檔案並將 的所有實體
@msft-sme
取代為
@microsoft/windows-admin-center-sdk
:
./angular.json
./gulpfile.ts/common/e2e.ts
./gulpfile.ts/common/resjson.ts
./src/polyfills.ts
./src/test.ts
由於您已完成的步驟,可能會有未解決的錯誤。 繼續 構建步驟.
在升級過程的此時,您的擴展存儲庫已準備就緒,可以開始調試過程。 繼續執行以下步驟:
執行
gulp build
。
注意任何linting和編譯錯誤。
修復這些錯誤,並根據需要重複步驟 1-3。
修復所有構建錯誤后,提交更改並繼續執行 Run steps。
難以診斷構建錯誤
在構建步驟中進行調試時可能收到的一些錯誤可能難以診斷。 以下是兩個最常見的難以診斷的錯誤以及如何緩解這些錯誤:
NG6002:出現在 AppModule 的 NgModule.imports 中,但無法解析為 NgModule 類
此類錯誤發生在構建時,通常在升級后的存儲庫至少成功構建一次之前。 要解決此問題,請運行
ng serve --prod
,之後這些錯誤在構建時不應再出現。
介面錯誤地擴展了另一個介面
描述
此錯誤發生在“gulp build”的 inlineCompile 步驟中,並且是由於下載的
@types/jasmine
包與
@types/jasminewd2
包所需的版本不匹配而發生的。 可以通過刪除
@types/jasminewd2
包來解決此錯誤。
輸出 bundle 檔名
在構建擴展時,由於捆綁包中的檔名,您可能會遇到問題。 要避免這些問題,請特別注意以下欄位:
必須啟用輸出哈希。
啟用輸出哈希后,將為擴展的每個內部版本生成唯一的檔名。 如果未啟用此選項,則由於檔案名重複,在瀏覽器中查看時可能無法看到對擴展的更改。
要從此欄位啟用命令列,請將標誌添加到
--output-hashing
ng build
命令中。
要直接從存儲庫啟用此字段,請導航到 angular.json 檔,然後在 production configurations (生產配置) 下查找該
outputHashing
欄位。
必須禁用命名塊
。 啟用命名數據塊后,每個 bundle 檔都包含其原始模組檔名。 雖然這似乎很有用,但它通常會導致檔名非常長,這可能會導致 Windows Admin Center 擴展源中出現錯誤。
要從命令行禁用此欄位,請將該標誌添加到
--named-chunks
ng build
命令中。
要直接從存儲庫中禁用此字段,請導航到 angular.json 檔,然後在 production configurations (生產配置) 下查找該
namedChunks
欄位。 將此欄位設置為 false。
現在,您已經修復了擴展中的所有生成錯誤,可以運行擴展並修復任何運行時問題。 請按照以下步驟執行您的延伸:
使用
gulp serve --port <port> --prod --aot
旁載入擴展。
在瀏覽器中,查找擴展的任何運行時問題,例如:
-
擴展頁未載入
-
擴展頁中缺少元素
-
主控台錯誤
-
任何其他看起來不對勁或行為異常的內容
-
修復您發現的任何運行時問題。
-
當擴展穩定后,提交您的更改。
完成這些步驟后,請繼續 創建 主分支.
創建main分支
修復所有linting、編譯和運行時錯誤後,您就可以完成擴展的升級了。 為此,我們需要在擴展存儲庫中創建一個新分支。 請按照以下步驟完成擴展的升級:
-
確保您已準備好完成升級過程,並且功能分支中的所有內容都按預期工作。
-
在存儲庫中創建名為 「main」 的新分支。
-
從合併到main的features/ng11分支創建一個PR。
-
準備就緒后,完成PR。
-
恭喜,您已成功升級擴展!
發佈升級后的擴展
在 Windows Admin Center 桌面和服務模式下測試擴展後,請發送電子郵件以
wacextensionrequest@microsoft.com
協調升級擴展的發佈。
使用shell的兩個分支
升級 Windows Admin Center shell 會導致許多環境變化。 其中一項更改是使用之前 10.22.0 版本中的 Node 12.18.3。 這些版本不相容,您必須切換全域版本才能在每個環境中運行構建命令。
要管理您的 Node 版本,我們建議使用 Node 版本管理員:
https://github.com/coreybutler/nvm-windows
按照說明在您的電腦上安裝 nvm-windows。
安裝後,您可以通過運行以下命令來準備環境:
nvm install 12.18.3
nvm use 12.18.3
npm i -g gulp-cli
npm i -g @angular/cli
npm i -g vsts-npm-auth
npm i -g typescript
nvm install 10.22.0
nvm use 10.22.0
npm i -g gulp-cli
npm i -g @angular/cli
npm i -g vsts-npm-auth
npm i -g typescript
這將設置您的 Node 環境,以便使用新舊版本的 Angular 進行開發。
切換 Node 版本
您可以使用 PowerShell 切換您正在使用的 Node 版本。
該 nvm list
命令可用於列出已安裝的節點版本。
該 nvm use <version>
命令可用於在節點版本之間快速切換。
您可以在此處找到 Node、Angular 和 Typescript 版本的完整索引列表: Node - Angular 兼容性索引。
本文檔中的所有版本號都特定於從 Angular 7 到 Angular 11 的 Windows Admin Center 升級。
按照上述過程,您將丟失所有全域節點設置,包括 VSTS 身份驗證。
若要還原 VSTS 身份驗證,請在任何儲存庫的根目錄下運行以下命令: vsts-npm-auth -config .npmrc
將擴展升級到 Angular 11 時的其他注意事項
使用shell的兩個分支時,shell和擴展的旁載入不應受到影響。
使用 copyTarget 時,請注意您位於哪個 shell 分支中。 僅當您正在使用的擴展也升級到 Angular 11 時,才在 2.0 分支中使用此命令。
如果存儲庫已升級到 Angular 11,則使用最新的 2.x.0 版本的 shell 庫。 否則,請繼續使用最新的 1.x.0 版本。
您可以通過查看 package.json 檔來判斷存儲庫是否已升級。