添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
纯真的石榴  ·  [Solved] ...·  1 年前    · 

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 檔來判斷存儲庫是否已升級。

  •