Oktatóanyag: ASP.NET Core-alkalmazás létrehozása az Angularnal a Visual Studióban

Ebben a cikkben megtudhatja, hogyan hozhat létre egy ASP.NET Core-projektet API-háttérrendszerként és Angular-projektként, hogy felhasználói felületként működjön.

A Visual Studio ASP.NET Core Single Page Application (SPA) sablonokat tartalmaz, amelyek támogatják az Angulart és a Reactet. A sablonok egy beépített ügyfélalkalmazás-mappát biztosítanak a ASP.NET Core-megoldásban, amely tartalmazza az egyes keretrendszerek alapfájljait és mappáit.

A cikkben ismertetett módszerrel létrehozhat ASP.NET alapvető egyoldalas alkalmazásokat, amelyek:

• Helyezze az ügyfélalkalmazást egy külön projektbe, a ASP.NET Core-projekten kívülre
• Az ügyfélprojekt létrehozása a számítógépre telepített keretrendszer parancssori felülete alapján

Note

Ez a cikk a Visual Studio 2022 17.8-as verziójában frissített sablont használó projektlétrehozás folyamatát ismerteti.

Előfeltételek

Győződjön meg arról, hogy a következőket telepíti:

• A Visual Studio 2022 17.8-as vagy újabb verziója a ASP.NET és webfejlesztési munkaterhelés telepítve van. Nyissa meg a Visual Studio letöltési oldalát, és telepítse ingyenesen. Ha telepítenie kell a munkaterhelést, és a Visual Studio már telepítve van, lépjen a(z) Eszközök>Eszközök és funkciók letöltése...lehetőségre, ami megnyitja a Visual Studio Installert. Válassza ki a ASP.NET és a webfejlesztési számítási feladatot, majd válassza a Módosítás lehetőséget.
• npm (https://www.npmjs.com/), amelyet a Node.js tartalmaz
• Angular CLI (https://angular.dev/tools/cli), amely lehet az Ön által választott verzió. Az előtérbeli projekt a helyi gépen telepített keretrendszer cli-eszközeivel jön létre, így ez határozza meg a sablonban használt Angular-verziót.

Az alkalmazás létrehozása

1. A Start ablakban (a megnyitáshoz válassza a Fájl>a Start ablak lehetőséget), válassza Új projekt létrehozásalehetőséget.

   

2. Keresse meg az Angulart a felső keresősávon, majd válassza Angular és ASP.NET Corelehetőséget.

   

   Note

   Kompatibilitási probléma merült fel az Angular 20.x.x és az Angular és ASP.NET Core sablonnal a Visual Studio 2022-ben. Az Angular 20.x.x visual Studio 2022-ben való használatához ajánlott először egy ASP.NET Core-projektet létrehozni, hozzáadni egy Angular-projektet a megoldáshoz, majd hozzáadni egy projekthivatkozást az Angular-projekthez a ASP.NET Core-projektből. Ezt a módszert használhatja a cikkben ismertetett kombinált sablon helyett. A problémával kapcsolatos további információkért lásd: Új megoldás létrehozása az Angular használatával.

3. Nevezze el a projektet AngularWithASP névre, majd válassza a Továbbgombot.

   A További információk párbeszédpanelen győződjön meg arról, hogy HTTPS- konfigurálása engedélyezve van. A legtöbb esetben hagyja meg a többi beállítást az alapértelmezett értékeknél.

4. Válassza a Create gombot.

   A Megoldáskezelő a következőket jeleníti meg:

   

   A különálló Angular-sablonhoz képest, néhány új és módosított fájl jelenik meg a ASP.NET Core-ba való integrációhoz:

   • aspnetcore-https.js
   • proxy.conf.js
   • package.json(módosítva)
   • angular.json(módosítva)
   • app.components.ts
   • app.module.ts

   Néhány projektfájlról további információt Következő lépésekcímű témakörben talál.

A projekt tulajdonságainak beállítása

1. A Megoldáskezelőben kattintson a jobb gombbal az AngularWithASP.Server projektre, és válassza a Tulajdonságoklehetőséget.

   

2. A Tulajdonságok lapon nyissa meg a Hibakeresés lapot, és válassza a Hibakeresési indítási profilok felhasználói felületének megnyitása lehetőséget. Törölje a jelet a Böngésző indítása lehetőségnél a HTTPS profilról vagy az ASP.NET Core-projektről elnevezett profilról, ha van ilyen.

   

   Ez az érték megakadályozza a weblap megnyitását a forrás időjárási adataival.

   Note

   A Visual Studióban launch.json a hibakeresési eszköztár Start gombjához társított indítási beállításokat tárolja. launch.json a .vscode mappában kell lennie.

3. Kattintson a jobb gombbal a megoldásra a Megoldáskezelőben, és válassza a Tulajdonságoklehetőséget. Ellenőrizze, hogy az indítási projekt beállításai több projektre vannak-e állítva, és hogy a művelet mindkét projekt esetében a Start értékre van-e állítva.

A projekt indítása

Nyomja le F5 vagy az ablak tetején található Start gombot az alkalmazás elindításához. Két parancssor jelenik meg:

• Az ASP.NET Core API-projekt fut
• Az ng start parancsot futtató Angular CLI

Note

Ellenőrizze az üzenetek konzolkimenetét. Előfordulhat például, hogy egy üzenet frissíti Node.js.

Megjelenik az Angular-alkalmazás, és az API-n keresztül van feltöltve (a localhost-port eltérhet a képernyőképtől).

Ha nem látja az időjárás-előrejelzés adatait a böngészőben, tekintse meg a hibaelhárítást.

A projekt közzététele

A Visual Studio 2022 17.3-s verziójától kezdve közzéteheti az integrált megoldást a Visual Studio Publish eszközzel.

Note

A közzététel használatához hozza létre a JavaScript-projektet a Visual Studio 2022 17.3-s vagy újabb verziójával.

1. A Megoldáskezelőben kattintson a jobb gombbal az AngularWithASP.Server projektre, és válassza >projekthivatkozás hozzáadásalehetőséget.

   Győződjön meg arról, hogy az angularwithasp.client projekt van kiválasztva.

2. Válassza OKlehetőséget.

3. Kattintson ismét a jobb gombbal a ASP.NET Core-projektre, és válassza a Projektfájl szerkesztéselehetőséget.

   Ekkor megnyílik a projekt .csproj fájlja.

4. A .csproj fájlban győződjön meg arról, hogy a projekthivatkozás tartalmaz egy <ReferenceOutputAssembly> elemet, amelynek értéke false.

   Ennek a hivatkozásnak a következőképpen kell kinéznie:

    <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
   

5. Kattintson a jobb gombbal a ASP.NET Core-projektre, és válassza Project újratöltése lehetőséget, ha ez a lehetőség elérhető.

6. A Program.cs győződjön meg arról, hogy a következő kód található.

   app.UseDefaultFiles();
   app.UseStaticFiles();
   
   // Configure the HTTP request pipeline.
   if (app.Environment.IsDevelopment())
   {
      app.UseSwagger();
      app.UseSwaggerUI();
   }
   

7. A közzétételhez kattintson a jobb gombbal a ASP.NET Core-projektre, válassza a Közzététellehetőséget, és válassza ki a kívánt közzétételi forgatókönyvnek megfelelő beállításokat, például az Azure-t, tegye közzé egy mappában stb.

   A közzétételi folyamat több időt vesz igénybe, mint egy ASP.NET Core-projekt esetében, mivel a npm run build parancs meghívása a közzétételkor történik. A BuildCommand alapértelmezett módon npm run build fut.

   Ha egy mappában tesz közzé, a közzétételi mappához hozzáadott fájlokról további információt a ASP.NET Core könyvtárstruktúrájában talál.

Hibaelhárítás

Proxy hiba

A következő hibaüzenet jelenhet meg:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Ha ezt a problémát látja, valószínűleg a frontend a backend előtt kezdett dolgozni.

• Amint megjelenik a háttérbeli parancssor, csak frissítse az Angular alkalmazást a böngészőben.
• Ellenőrizze azt is, hogy a háttérrendszer úgy van-e konfigurálva, hogy az az előtér előtt kezdődjön. Az ellenőrzéshez válassza ki a megoldást a Megoldáskezelőben, és válassza a Project menüTulajdonságok lehetőséget. Ezután válassza Indítási projektek konfigurálása lehetőséget, és győződjön meg arról, hogy a háttérrendszerbeli ASP.NET Core-projekt szerepel a listában. Ha nem ez az első, válassza ki a projektet, és a Fel nyílbillentyűvel állítsa be az első projektként az indítási listában.

Port ellenőrzése

Ha az időjárási adatok nem megfelelően töltődnek be, előfordulhat, hogy a portok helyességét is ellenőriznie kell.

1. Nyissa meg a launchSettings.json fájlt a ASP.NET Core-projektben (a Tulajdonságok mappában). Kérje le a portszámot a applicationUrl tulajdonságból.

   Ha több applicationUrl tulajdonság is létezik, keressen egyet, amely egy https végpontot használ. Úgy kell kinéznie, mint https://localhost:7049.

2. Ezután nyissa meg az Angular-projekt proxy.conf.js fájlját (tekintse meg a src mappát). Frissítse a céltulajdonságot úgy, hogy megfeleljen a applicationUrl tulajdonságának. Frissítéskor ennek az értéknek a következőhöz hasonlóan kell kinéznie:

   target: 'https://localhost:7049',
   

Kikötőmunkás

Ha Docker-támogatással hozza létre a projektet, engedélyezve van, hajtsa végre a következő lépéseket:

1. A Visual Studióban, az alkalmazás betöltése után szerezze meg a Docker HTTPS-portot a Tárolók ablak használatával. Ellenőrizze a Környezet vagy a Portok lapot.

   

2. Nyissa meg az Angular-projekthez tartozó proxy.conf.js fájlt. Frissítse a target változót, hogy megfeleljen a HTTPS-portnak a Tárolók ablakban. Például a következő kódban:

   const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
      env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';
   

   Módosítsa a https://localhost:7209 a megfelelő HTTPS-portra (ebben a példában https://localhost:62958).

   Note

   Ha a HTTPS-port hiányzik a Tárolók ablakban, launchSettings.json fájllal adhat hozzá portot. A Container (Dockerfile) szakaszban és a "useSSL": true bejegyzés után adja hozzá: "sslPort": <any port>. Ebben a példában használja a következőt: "sslPort": 62958.

3. Indítsa újra az alkalmazást.

Következő lépések

A ASP.NET Core spa-alkalmazásairól az egyoldalas alkalmazások fejlesztése címűAngular című szakaszában talál további információt. A csatolt cikk további kontextust biztosít a projektfájlokhoz, például aspnetcore-https.js és proxy.conf.js, bár a megvalósítás részletei a projektsablonok eltérései miatt eltérőek. A ClientApp-mappa helyett például az Angular-fájlok egy külön projektben találhatók.

Az ügyfélprojektre vonatkozó MSBuild információkért lásd JSPSMSBuild tulajdonságait.