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

Windows Admin Center uppgraderar till Angular 11.0! 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 det är din tur att uppdatera dina tillägg. 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 11 måste du konfigurera utvecklarmiljön med det senaste Windows Admin Center-gränssnittet och utvecklingsverktygen. Slutför följande steg innan du fortsätter till uppgraderingsprocessen:

1. Installera den senaste versionen av Windows Admin Center i utvecklingsläge (msiexec /i WindowsAdminCenter<version>.msi DEV_MODE=1) med det uppgraderade gränssnittet. Kontakta din Microsoft-kontakt om detta inte har tillhandahållits till dig.
2. (Rekommenderas) Skapa en features/ng11 gren på lagringsplatsen.
3. (Rekommenderas) Uppdatera version.json versionen till (N+1).0.0.
4. I en PowerShell-konsol måste du växla till respektive Node-version för din Angular-version (mer information finns i Arbeta med två grenar av gränssnittet för mer information). För Angular 11 kör du nvm use 12.18.3. Stäng terminalen för att den här ändringen ska börja gälla.
5. node_modules Rensa mappen för att undvika npm-konflikter.

Automatiserad uppgraderingsprocess

Ladda ned och installera WINDOWS Admin Center CLI-verktygen genom att köra npm install -g @microsoft/windows-admin-center-sdk@experimental om du inte redan har gjort det innan du fortsätter med följande steg.

1. På rotnivån för lagringsplatsen kör du wac upgrade --audit=false --experimental.

   • Om du arbetar på en tilläggslagringsplats som används av andra tillägg ska du även inkludera --library flaggan.

   Om biblioteksflaggan användes redigerar du name egenskapen i src/package.json till något som är unikt för tillägget.

2. (Villkorsstyrd) Om lagringsplatsen för tillägget har beroenden för något annat tilläggspaket måste du manuellt välja den nya angular-versionen för tillägget (t.ex. msft-sme-certificate-manager har ett beroende av msft-sme-event-viewer. De automatiserade verktygen kommer inte att uppdatera msft-sme-event-viewer versionen, den måste uppdateras manuellt.) Se också till att ange mappnivån "/dist" på alla importer från tillägg, alla importer på lägre eller högre nivå fungerar inte (t.ex. import { foobar } from '@msft-sme/event-viewer' skulle behöva ändras till import { foobar } from '@msft-sme/event-viewer/dist'.)

3. Öppna app-routing.module.ts och ändra eventuella appRoutes som har formatet ./folder-name/file-name#ModuleClass till () => import('./folder-name/file-name').then(m => m.ModuleClass). Om det finns andra routing.module.ts filer måste de också uppdateras på det här sättet.

4. Ta bort UpgradeAudit.txt filen. Den genereras automatiskt för din referens men behöver inte gå till lagringsplatsen.

5. Gå igenom följande filer och ersätt alla instanser av @msft-sme med @microsoft/windows-admin-center-sdk:

• ./angular.json
• ./gulpfile.ts/common/e2e.ts
• ./gulpfile.ts/common/resjson.ts
• ./src/polyfills.ts
• ./src/test.ts

6. Det kommer sannolikt att finnas olösta fel som ett resultat av de steg som du har slutfört. Gå vidare till Build-stegen.

Byggsteg

Nu i uppgraderingsprocessen är lagringsplatsen för tillägget redo att skapas och felsökningsprocessen kan börja. Fortsätt med följande steg:

1. Kör gulp build.
2. Se upp för eventuella lintnings- och kompileringsfel.
3. Åtgärda dessa fel och upprepa steg 1–3 efter behov.
4. När alla byggfel har åtgärdats checkar du in ändringarna och fortsätter till Kör steg.

Svårt att diagnostisera byggfel

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

• NG6002: Förekommer i NgModule.imports av AppModule, men kunde inte tolkas till en NgModule-klass

  • Den här typen av fel inträffar vid kompileringstid, vanligtvis innan det uppgraderade arkivet har skapats framgångsrikt minst en gång. Lös problemet genom att köra ng serve --prod, varefter dessa fel inte längre ska visas när du skapar.

• Gränssnittet utökar felaktigt ett annat gränssnitt

  • Det här felet inträffar under steget inlineCompile i "gulp build" och inträffar som ett resultat av ett matchningsfel i versioner mellan det @types/jasmine nedladdade paketet och vad @types/jasminewd2 paketet kräver. Det här felet kan lösas genom att ta bort @types/jasminewd2 paketet.

Filnamn för utdatapaket

När du skapar tillägget kan du stöta på problem som ett resultat av filnamnen i ditt paket. Undvik dessa problem genom att ägna särskild uppmärksamhet åt följande fält:

• Utdatashashing måste vara aktiverat. När utdatashashing är aktiverat genereras unika filnamn för varje version av tillägget. Om detta inte är aktiverat kan det hända att du inte kan se ändringarna i tillägget när du visar det i webbläsaren på grund av dubbletter av filnamn.
  • Om du vill aktivera kommandoraden från det här fältet lägger du till flaggan i --output-hashing ett ng build kommando.
  • Om du vill aktivera det här fältet direkt från lagringsplatsen går du till din angular.json-fil och letar efter fältet outputHashing under produktionskonfigurationer.
• Namngivna segment måste inaktiveras. När namngivna segment är aktiverade innehåller varje paketfil dess ursprungliga modulfilnamn. Även om det kan verka användbart resulterar det ofta i otroligt långa filnamn som kan resultera i fel i Windows Admin Center-tilläggsflödet.
  • Om du vill inaktivera det här fältet från kommandoraden lägger du till flaggan i --named-chunks ett ng build kommando.
  • Om du vill inaktivera det här fältet direkt från lagringsplatsen går du till din angular.json-fil och letar efter fältet namedChunks under produktionskonfigurationer. Ställ in fältet på false.

Utför steg

Nu när du har åtgärdat alla byggfel i tillägget är du redo att köra tillägget och åtgärda eventuella körningsproblem. Följ stegen nedan för att köra tillägget:

1. Sidladda tillägget med gulp serve --port <port> --prod --aot.
2. I webbläsaren söker du efter eventuella problem vid körning med tillägget, till exempel:
   • Tilläggssidor läses inte in
   • Saknade element på tilläggssidan(-sidorna)
   • Konsolfel
   • Allt annat som ser ut eller beter sig konstigt
3. Åtgärda eventuella körningsproblem som du har upptäckt.
4. När tillägget har stabiliserats checkar du in ändringarna.

När du har slutfört de här stegen fortsätter du till Skapa en huvudgren.

Skapa en huvudgren

När alla linting-, kompilerings- och körningsfel har åtgärdats är du redo att slutföra uppgraderingen av tillägget. För att göra detta behöver vi skapa en ny filial i tilläggsarkivet. Följ de här stegen för att slutföra uppgraderingen av tillägget:

1. Se till att du är redo att slutföra uppgraderingsprocessen och att allt fungerar som förväntat i funktionsgrenen.
2. Skapa en ny gren med namnet "main" på lagringsplatsen.
3. Skapa en PR från grenen features/ng11 som sammanfogas till main.
4. Slutför PR när du är klar.
5. Grattis, du har uppgraderat ett tillägg!

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.

Arbeta med två grenar i shell-miljön

Uppgraderingen av Windows Admin Center-gränssnittet har resulterat i många miljöförändringar. En sådan ändring är användningen av Node 12.18.3 från den tidigare versionen 10.22.0. Dessa versioner är inkompatibla och du måste växla din globala version för att köra byggkommandon i varje miljö.

För att hantera dina versioner av Node rekommenderar vi att du använder Node Version Manager: https://github.com/coreybutler/nvm-windows

Följ anvisningarna för att installera nvm-windows på datorn.

När du har installerat den kan du förbereda miljön genom att 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
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

Då konfigureras din Node-miljö för utveckling med både de nya och gamla versionerna av Angular.

Växla nodversion

Den version av Node som du använder kan ändras genom PowerShell.

Kommandot nvm list kan användas för att lista installerade nodversioner.

Kommandot nvm use <version> kan användas för att snabbt växla mellan nodversioner.

Du hittar en fullständig indexlista över vilka Node-, Angular- och Typescript-versioner som går ihop här: Node – Angular-kompatibilitetsindex.

Anmärkning

Alla versionsnummer i det här dokumentet är specifika för uppgraderingen av Windows Admin Center från Angular 7 till Angular 11.

Efter processen ovan förlorar du alla globala nodinställningar, inklusive VSTS-autentiseringen.

Om du vill återställa VSTS-autentisering kör du det här kommandot i roten på valfri lagringsplats: vsts-npm-auth -config .npmrc

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

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

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