Dela via

Uppgradera befintliga Windows Admin Center-tillägg till Angular 15

  • Gäller för: ✅ Windows Admin Center, ✅ Windows Admin Center Preview

Windows Admin Center har uppgraderats till Angular 15! Den här uppgraderingen innehåller det senaste i funktioner, säkerhet och prestanda, och vi är glada över att ha den tillgänglig för dig. Hittills har gränssnittet för Windows Admin Center uppgraderats och nu är det din tur att uppdatera dina tillägg.

Vi rekommenderar starkt att du uppgraderar dina tillägg till den senaste Angular-versionen som vi stöder. Alla nya korrigeringar och uppdateringar av vårt gränssnitt och SDK är endast tillgängliga för tillägg på Angular 15.

Följ stegen i det här dokumentet för att uppdatera tillägget. Om du stöter på problem under den här processen kontaktar du din Microsoft-kontakt så hjälper de dig att dirigera begäran.

Inledande steg

Innan du påbörjar uppgraderingen till Angular 15 är det viktigt att se till att projektet använder ESLint och att din miljö har konfigurerats korrekt.

Anmärkning

Om tillägget fortfarande kör Angular 7 uppgraderar du till Angular 11 innan du läser resten av den här guiden.

Övergång från TSLint till ESLint

Tidigare har Windows Admin Center använt det utökningsbara verktyget TSLint för att kontrollera TypeScript-koden för läsbarhet, underhåll och funktionsfel. TSLint har blivit inaktuell och ersatt av ESLint, ett mer kraftfullt och allmänt stödt verktyg. Windows Admin Center har övergått till att använda ESLint.

Om du vill ta reda på om du använder TSLint eller ESLint som linter för ditt tillägg går du till rotkatalogen för tilläggsprojektet:

  • Om det finns en fil med namnet .eslintrc.jsonanvänder du ESLint. Gå vidare till Konfigurera din miljö för uppgradering.
  • Om det finns en fil med namnet tslint.jsonanvänder du TSLint. Fortsätt om du vill lära dig hur du migrerar till ESLint.

Vi har skapat ett kommando i SDK för att automatisera övergången till ESLint. Följ dessa steg om du vill använda det:

  1. Gå till root-mappen för ditt tilläggsprojekt.
  2. Hämta den senaste versionen av SDK:et genom att köra npm install -g @microsoft/windows-admin-center-sdk@latest
  3. Kör npm install.
  4. Kör wac eslint.
  5. Åtgärda eventuella överträdelser genom att köra npx lint --fix eller göra manuella ändringar.

Konfigurera din miljö för uppgradering

Innan du påbörjar uppgraderingen till Angular 15 måste du konfigurera utvecklarmiljön med det senaste Windows Admin Center-gränssnittet och utvecklingsverktygen, inklusive uppgradering av din version av Node.

För att hantera dina versioner av Node rekommenderar vi att du använder Node Version Manager. Följ anvisningarna för att installera nvm-windows på datorn. Versionen bör vara 1.1.11 eller senare, eftersom äldre versioner kanske inte stöder de Node.js versioner som krävs för den här uppgraderingen.

När du har installerat den kan du förbereda miljön genom att köra följande kommandon:

nvm install 16.14.0
nvm use 16.14.0
npm i -g gulp-cli
npm i -g @angular/cli@15.2.9
npm i -g vsts-npm-auth
npm i -g typescript@4.8.2

Anmärkning

Om du vill fortsätta att göra ändringar i Angular 11 vill du använda Nod 12.18.3. Dessa versioner är inte kompatibla för användning samtidigt, så du måste växla din globala version för att köra byggkommandon i varje miljö.

Om du vill ändra tillbaka nodversionen till Angular 11-konfigurationen kan du köra följande kommandon:

nvm install 12.18.3
nvm use 12.18.3
npm i -g gulp-cli
npm i -g @angular/cli@11.2.13
npm i -g vsts-npm-auth
npm i -g typescript@4.1.5

När du växlar nodversioner kan du förlora alla globala nodinställningar, inklusive VSTS-autentiseringen.

För att återställa VSTS-autentiseringen, kör vsts-npm-auth -config .npmrc i roten av ditt kodförråd.

Automatiserad uppgraderingsprocess

För att underlätta en smidigare uppgradering från Angular 11 till Angular 15 har vi utvecklat ett CLI-kommando som en del av vårt SDK som automatiserar mycket av uppgraderingsprocessen.

Innan du fortsätter med de automatiska uppgraderingsstegen kontrollerar du att din miljö är korrekt konfigurerad och att du har bytt till Angular 15. Följ dessa steg när du är redo att uppgradera:

  1. Kontrollera att du har den senaste versionen av WAC CLI genom att köra npm install -g @microsoft/windows-admin-center-sdk@latest.
  2. Kör wac angular15Upgrade.

Åtgärder efter uppgradering

När du har kört uppgraderingskommandot genereras en log.txt fil i projektets rot. Den här filen innehåller information om ytterligare åtgärder.

När du har kört uppgraderingskommandot, se till att stagga ändringarna. Det här kommandot är utformat för att köras flera gånger om det behövs.

Nu bör du kunna köra och testa tillägget som vanligt.

Felsökningsscenarier

Vissa av de fel du kan få när du felsöker i byggsteget kan vara svåra att diagnostisera. Här är några av de vanligaste felen och hur du åtgärdar dem:

  • AjaxResponse kräver 1 typargument

    • För att lösa problemet, försök att stega dina aktuella ändringar och sedan köra uppgraderingskommandot igen. Uppgraderingskommandot bör ha åtgärdat detta, men det kan finnas gränsfall. Se till att du manuellt åtgärdar dessa fel genom att ändra AjaxResponse till AjaxResponse<any>.

  • CSS-syntaxfel i anpassade CSS-filer

    File path: C:/Branches/msft-sme-containers/src/app/containers-inventory/containers-inventory.component.css
        Type: css-syntax-error
        Line: undefined
        Char: undefined
        Message: Warning: ▲ [WARNING] Unexpected ">" [css-syntax-error]
    C:/Branches/msft-sme-containers/src/app/containers-inventory/containers-inventory.component.css:1:7:
    1 │ :host >>> .summary-container {
                ^
    • För att lösa problemet, försök att stega dina aktuella ändringar och sedan köra uppgraderingskommandot igen. Uppgraderingskommandot bör hantera detta automatiskt, men om det inte gör det

  • Beroendevarningar

    Build at: 2023-11-14T19:31:35.361Z - Hash: 069ae6fa11d268d6 - Time: 32165ms
[11:31:35] Warning: C:\Branches\msft-sme-containers\node_modules\@msft-sme\core\data\crypto.js depends on 'base64-arraybuffer'. CommonJS or AMD dependencies can cause optimization bailouts.      
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Branches\msft-sme-containers\node_modules\@msft-sme\event-viewer\dist\fesm2020\msft-sme-event-viewer-lib.mjs depends on 'file-saver'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Branches\msft-sme-containers\node_modules\@msft-sme\powershell-console\__ivy_ngcc__\dist\fesm2015\msft-sme-powershell-console-lib.js depends on 'xterm'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: C:\Branches\msft-sme-containers\node_modules\@msft-sme\powershell-console\__ivy_ngcc__\dist\fesm2015\msft-sme-powershell-console-lib.js depends on 'xterm-addon-fit'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
    • Dessa problem måste åtgärdas manuellt. Gå till angular.json, leta efter "allowedCommonJsDependencies" och lägg till alla beroendeobjekt i arrayen. I det här fallet skulle det vara: "allowedCommonJsDependencies": ["base64-arraybuffer", "file-saver", "xterm", "xterm-addon-fit"]

Andra överväganden vid uppgradering av tillägg till Angular 15

  • Sidoinstallation av skalet och tilläggen ska inte påverkas när du arbetar med två grenar av skalet.
  • När du använder copyTarget bör du vara medveten om vilken gränssnittsgren du befinner dig i. Använd endast det här kommandot i grenen 4.0 om tillägget du arbetar med också uppgraderas till Angular 15.
  • Om lagringsplatsen har uppgraderats till Angular 15 använder du den senaste 4.x.0-versionen av shell-bibliotek. Annars fortsätter du att använda den senaste versionen av 2.x.0.

Du kan se om en lagringsplats uppgraderas genom att titta på filen package.json.

Släppa ditt uppgraderade tillägg

När tillägget har testats i Windows Administrationscenters skrivbords- och tjänstläge skickar du ett e-postmeddelande till wacextensionrequest@microsoft.com för att samordna lanseringen av ditt uppgraderade tillägg.