Dela via

Använda Angular-projektmallen med ASP.NET Core

  • Artikel

Not

Det här är inte den senaste versionen av den här artikeln. För den nuvarande versionen, se .NET 9-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. Den aktuella versionen finns i .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

Den aktuella utgåvan finns i .NET 9-versionen av denna artikel .

Visual Studio innehåller projektmallar för att skapa ensidesappar (SPA) baserade på JavaScript-ramverk som Angular, Reactoch Vue som har en ASP.NET Core-backend. Följande mallar:

  • Skapa en Visual Studio-lösning med ett klientdelsprojekt och ett serverdelsprojekt.
  • Använd Visual Studio-projekttypen för JavaScript och TypeScript (.esproj) för klientdelen.
  • Använd ett ASP.NET Core-projekt för serverdelen.

Projekt som skapats med hjälp av Visual Studio-mallarna kan köras från kommandoraden i Windows, Linux och macOS. Om du vill köra appen använder du dotnet run --launch-profile https för att köra serverprojektet. När du kör serverprojektet startas automatiskt klientdelens JavaScript-utvecklingsserver. Startprofilen https krävs för närvarande.

Självstudie om Visual Studio

Om du vill komma igång med ett Angular-projekt följer du självstudiekursen Skapa en ASP.NET Core-app med Angular i Visual Studio-dokumentationen.

Mer information finns i JavaScript och TypeScript i Visual Studio

ASP.NET Core SPA-mallar

Visual Studio innehåller mallar för att skapa ASP.NET Core-appar med en JavaScript- eller TypeScript-klientdel. Dessa mallar är tillgängliga i Visual Studio 2022 version 17.8 eller senare med ASP.NET och webbutveckling arbetsbelastning installerad.

Visual Studio-mallarna för att skapa ASP.NET Core-appar med en JavaScript- eller TypeScript-klientdel erbjuder följande fördelar:

  • Rensa projektavgränsning för klientdelen och serverdelen.
  • Håll dig up-to-date med de senaste klientdelsramverksversionerna.
  • Integrera med det senaste frontend-kommandoradsverktyget, till exempel Vite.
  • Mallar för både JavaScript & TypeScript (endast TypeScript för Angular).
  • Omfattande JavaScript- och TypeScript-kodredigeringsupplevelse.
  • Integrera JavaScript-byggverktyg med .NET-versionen.
  • användargränssnitt för npm-beroendehantering.
  • Kompatibel med felsökning och startkonfiguration i Visual Studio Code.
  • Kör klientdelsenhetstester i Test Explorer med hjälp av JavaScript-testramverk.

Äldre ASP.NET Core SPA-mallar

Tidigare versioner av .NET SDK inkluderade vad som nu är äldre mallar för att skapa SPA-appar med ASP.NET Core. Dokumentation om dessa äldre mallar finns i ASP.NET Core 7.0-versionen av SPA-översikten och artiklarna Angular och React.

Projektmallen ASP.NET Core med Angular är en praktisk utgångspunkt för ASP.NET Core-appar med Angular och Angular CLI för att implementera ett omfattande användargränssnitt på klientsidan.

Projektmallen motsvarar att skapa både ett ASP.NET Core-projekt som fungerar som ett webb-API och ett Angular CLI-projekt för att fungera som ett användargränssnitt. Den här projektkombinationen gör det enkelt att vara värd för båda projekten i ett enda ASP.NET Core-projekt som kan skapas och publiceras som en enda enhet.

Projektmallen är inte avsedd för återgivning på serversidan (SSR).

Skapa en ny app

Skapa ett nytt projekt från en kommandotolk med kommandot dotnet new angular i en tom katalog. Följande kommandon skapar till exempel appen i en my-new-app katalog och växlar till den katalogen:

dotnet new angular -o my-new-app
cd my-new-app

Kör appen från antingen Visual Studio eller .NET CLI:

Öppna den genererade .csproj-filen och kör appen som vanligt därifrån.

Byggprocessen återställer npm-beroenden på den första körningen, vilket kan ta flera minuter. Efterföljande versioner är mycket snabbare.

Projektmallen skapar en ASP.NET Core-app och en Angular-app. ASP.NET Core-appen är avsedd att användas för dataåtkomst, auktorisering och andra problem på serversidan. Angular-appen, som finns i underkatalogen ClientApp, är avsedd att användas för alla användargränssnittsproblem.

Lägga till sidor, bilder, formatmallar och moduler

Katalogen ClientApp innehåller en Standard Angular CLI-app. Mer information finns i den officiella Angular-dokumentationen.

Det finns små skillnader mellan Angular-appen som skapats av den här mallen och den som skapats av Själva Angular CLI (via ng new); Appens funktioner är dock oförändrade. Appen som skapas av mallen innehåller en Bootstrap--baserad layout och ett grundläggande routningsexempel.

Köra ng-kommandon

Växla i kommandotolken till underkatalogen ClientApp:

cd ClientApp

Om du har verktyget ng installerat globalt kan du köra något av dess kommandon. Du kan till exempel köra ng lint, ng testeller något av de andra Angular CLI-kommandona. Du behöver dock inte köra ng serve eftersom din ASP.NET Core-app hanterar både server- och klientsidans delar av din app. Den använder internt ng serve under utveckling.

Om du inte har installerat verktyget ng kör du npm run ng i stället. Du kan till exempel köra npm run ng lint eller npm run ng test.

Installera npm-paket

Om du vill installera npm-paket från tredje part använder du en kommandotolk i ClientApp underkatalog. Till exempel:

cd ClientApp
npm install <package_name>

Publicera och implementera

Under utveckling körs appen i ett läge som är optimerat för utvecklarnas bekvämlighet. JavaScript-paket innehåller till exempel källkartor (så att du kan se din ursprungliga TypeScript-kod när du felsöker). Appen söker efter TypeScript-, HTML- och CSS-filändringar på disken och kompilerar automatiskt om och laddar om när filerna ändras.

I produktion bör du tillhandahålla en version av din app som är prestandaoptimerad. Detta konfigureras så att det sker automatiskt. När du publicerar genererar byggkonfigurationen en minimerad AoT-kompilerad version (i förväg) av koden på klientsidan. Till skillnad från utvecklingsversionen kräver inte produktionsversionen Node.js installeras på servern (såvida du inte har aktiverat återgivning på serversidan (SSR)).

Du kan använda standard ASP.NET Core-värd- och distributionsmetoder.

Kör "ng serve" självständigt

Projektet är konfigurerat för att starta en egen instans av Angular CLI-servern i bakgrunden när ASP.NET Core-appen startar i utvecklingsläge. Det här är praktiskt eftersom du inte behöver köra en separat server manuellt.

Det finns en nackdel med den här standardkonfigurationen. Varje gång du ändrar C#-koden och din ASP.NET Core-app måste startas om startas Angular CLI-servern om. Cirka 10 sekunder krävs för att starta säkerhetskopieringen. Om du gör frekventa C#-kodredigeringar och inte vill vänta tills Angular CLI startas om kör du Angular CLI-servern externt, oberoende av ASP.NET Core-processen.

Om du vill köra Angular CLI-servern externt växlar du till underkatalogen ClientApp i en kommandotolk och startar Angular CLI-utvecklingsservern:

cd ClientApp
npm start

När du startar din ASP.NET Core-app startar den inte en Angular CLI-server. Den instans som du startade manuellt används i stället. På så sätt kan den startas och startas om snabbare. Det är inte längre nödvändigt att vänta på att Angular CLI ska bygga om klientappen varje gång.

När proxyn startas härleds mål-URL:en och porten från miljövariablerna som anges av .NET, ASPNETCORE_URLS och ASPNETCORE_HTTPS_PORTS. Om du vill ange URL:er eller HTTPS-portar använder du någon av miljövariablerna eller ändrar värdet i proxy.conf.json.

Konfigurera proxymellanprogram för SignalR

Mer information finns i http-proxy-middleware.

Ytterligare resurser

Den uppdaterade Angular-projektmallen är en praktisk utgångspunkt för ASP.NET Core-appar som använder Angular och Angular CLI för att implementera ett omfattande användargränssnitt på klientsidan.

Mallen motsvarar att skapa ett ASP.NET Core-projekt som fungerar som en API-serverdel och ett Angular CLI-projekt som fungerar som ett användargränssnitt. Mallen erbjuder bekvämligheten med att vara värd för båda projekttyperna i ett enda appprojekt. Därför kan appprojektet skapas och publiceras som en enda enhet.

Skapa en ny app

Skapa ett nytt projekt från en kommandotolk med kommandot dotnet new angular i en tom katalog. Följande kommandon skapar till exempel appen i en my-new-app katalog och växlar till den katalogen:

dotnet new angular -o my-new-app
cd my-new-app

Kör appen från antingen Visual Studio eller .NET CLI:

Öppna den genererade .csproj-filen och kör appen som vanligt därifrån.

Byggprocessen återställer npm-beroenden på den första körningen, vilket kan ta flera minuter. Efterföljande versioner är mycket snabbare.

Projektmallen skapar en ASP.NET Core-app och en Angular-app. ASP.NET Core-appen är avsedd att användas för dataåtkomst, auktorisering och andra problem på serversidan. Angular-appen, som finns i underkatalogen ClientApp, är avsedd att användas för alla användargränssnittsproblem.

Lägga till sidor, bilder, formatmallar och moduler

Katalogen ClientApp innehåller en Standard Angular CLI-app. Mer information finns i den officiella Angular-dokumentationen.

Det finns små skillnader mellan Angular-appen som skapats av den här mallen och den som skapats av Själva Angular CLI (via ng new); Appens funktioner är dock oförändrade. Appen som skapas av mallen innehåller en Bootstrap--baserad layout och ett grundläggande routningsexempel.

Köra ng-kommandon

Växla till underkatalogen ClientApp i kommandotolken:

cd ClientApp

Om du har verktyget ng installerat globalt kan du köra något av dess kommandon. Du kan till exempel köra ng lint, ng testeller något av de andra Angular CLI-kommandona. Du behöver dock inte köra ng serve eftersom din ASP.NET Core-app hanterar både server- och klientsidans delar av din app. Internt använder den ng serve under utveckling.

Om du inte har installerat verktyget ng kör du npm run ng i stället. Du kan till exempel köra npm run ng lint eller npm run ng test.

Installera npm-paket

Om du vill installera npm-paket från tredje part använder du en kommandotolk i ClientApp underkatalog. Till exempel:

cd ClientApp
npm install --save <package_name>

Publicera och distribuera

Under utveckling körs appen i ett läge som är optimerat för utvecklarnas bekvämlighet. JavaScript-paket innehåller till exempel källkartor (så att du kan se din ursprungliga TypeScript-kod när du felsöker). Appen söker efter TypeScript-, HTML- och CSS-filändringar på disken och kompilerar automatiskt om och laddar om när filerna ändras.

Vid produktion, använd en version av din app som är optimerad för prestanda. Detta konfigureras så att det sker automatiskt. När du publicerar genererar byggkonfigurationen en minimerad AoT-kompilerad version (i förväg) av koden på klientsidan. Till skillnad från utvecklingsversionen kräver inte produktionsversionen Node.js installeras på servern (såvida du inte har aktiverat återgivning på serversidan (SSR)).

Du kan använda standard ASP.NET Core-värd- och distributionsmetoder.

Kör "ng serve" oberoende av varandra

Projektet är konfigurerat för att starta en egen instans av Angular CLI-servern i bakgrunden när ASP.NET Core-appen startar i utvecklingsläge. Det här är praktiskt eftersom du inte behöver köra en separat server manuellt.

Det finns en nackdel med den här standardkonfigurationen. Varje gång du ändrar C#-koden och din ASP.NET Core-app måste startas om startas Angular CLI-servern om. Cirka 10 sekunder krävs för att starta säkerhetskopieringen. Om du gör frekventa C#-kodredigeringar och inte vill vänta tills Angular CLI startas om kör du Angular CLI-servern externt, oberoende av ASP.NET Core-processen. Så här gör du:

  1. I en kommandotolk växlar du till underkatalogen ClientApp och startar Angular CLI-utvecklingsservern:

    cd ClientApp
npm start

    Viktig

    Använd npm start för att starta Angular CLI-utvecklingsservern, inte ng serve, så att konfigurationen i package.json respekteras. Om du vill skicka ytterligare parametrar till Angular CLI-servern lägger du till dem i relevant scripts rad i din package.json-fil.

  2. Ändra din ASP.NET Core-app så att den använder den externa Angular CLI-instansen i stället för att starta en egen. I klassen Startup ersätter du spa.UseAngularCliServer-anropet med följande:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

När du startar din ASP.NET Core-app startar den inte en Angular CLI-server. Den instans som du startade manuellt används i stället. På så sätt kan den startas och startas om snabbare. Du behöver inte längre vänta på att Angular CLI ska återskapa din klientapplikation varje gång.

När proxyn startas härleds mål-URL:en och porten från miljövariablerna som anges av .NET, ASPNETCORE_URLS och ASPNETCORE_HTTPS_PORTS. Om du vill ange URL:er eller HTTPS-portar använder du någon av miljövariablerna eller ändrar värdet i proxy.conf.json.

Skicka data från .NET-kod till TypeScript-kod

Under SSR kanske du vill skicka data per begäran från din ASP.NET Core-app till din Angular-app. Du kan till exempel skicka cookie-information eller något som lästs från en databas. Det gör du genom att redigera klassen Startup. I återanropet för UseSpaPrerenderinganger du ett värde för options.SupplyData till exempel följande:

options.SupplyData = (context, data) =>
{
    // Creates a new value called isHttpsRequest that's passed to TypeScript code
    data["isHttpsRequest"] = context.Request.IsHttps;
};

Med SupplyData-återanrop kan du skicka godtyckliga, per-begäran, JSON-serieliserbara data (till exempel strängar, booleska värden eller siffror). Din main.server.ts-kod tar emot detta som params.data. Det föregående kodexemplet skickar till exempel ett booleskt värde som params.data.isHttpsRequest till createServerRenderer återuppringning. Du kan skicka detta till andra delar av din app på alla sätt som stöds av Angular. Se till exempel hur main.server.ts skickar BASE_URL-värdet till en komponent vars konstruktor har deklarerats för att ta emot det.

Nackdelar med SSR

Alla appar drar inte nytta av SSR. Den främsta fördelen är upplevd prestanda. Besökare som når din app via en långsam nätverksanslutning eller på långsamma mobila enheter ser det ursprungliga användargränssnittet snabbt, även om det tar en stund att hämta eller parsa JavaScript-paketen. Många SPA:er används dock främst över snabba, interna företagsnätverk på snabba datorer där appen visas nästan omedelbart.

Samtidigt finns det betydande nackdelar med att aktivera SSR. Det ökar komplexiteten i din utvecklingsprocess. Koden måste köras i två olika miljöer: klientsidan och serversidan (i en Node.js miljö som anropas från ASP.NET Core). Här följer några saker att tänka på:

  • SSR kräver en Node.js installation på dina produktionsservrar. Detta gäller automatiskt för vissa distributionsscenarier, till exempel Azure App Services, men inte för andra, till exempel Azure Service Fabric.
  • Om du aktiverar byggflaggan BuildServerSideRenderer publiceras din node_modules-mapp . Den här mappen innehåller över 20 000 filer, vilket ökar distributionstiden.
  • Om du vill köra koden i en Node.js miljö kan den inte förlita sig på att det finns webbläsarspecifika JavaScript-API:er som window eller localStorage. Om din kod (eller något bibliotek från tredje part som du refererar till) försöker använda dessa API:er får du ett fel under SSR. Använd till exempel inte jQuery eftersom det refererar till webbläsarspecifika API:er på många platser. För att förhindra fel måste du antingen undvika SSR eller undvika webbläsarspecifika API:er eller bibliotek. Du kan omsluta alla anrop till sådana API:er i kontroller för att säkerställa att de inte anropas under SSR. Använd till exempel en kontroll, till exempel följande i JavaScript- eller TypeScript-kod:
if (typeof window !== 'undefined') {
    // Call browser-specific APIs here
}

Konfigurera proxymellanprogram för SignalR

Mer information finns i http-proxy-middleware.

Ytterligare resurser