Kurz: Vytvoření aplikace ASP.NET Core pomocí Angular v sadě Visual Studio

V tomto článku se dozvíte, jak vytvořit projekt ASP.NET Core tak, aby fungoval jako back-end rozhraní API a projekt Angular, který bude fungovat jako uživatelské rozhraní.

Visual Studio obsahuje šablony jednostránkové aplikace (SPA) ASP.NET Core, které podporují Angular a React. Šablony poskytují integrovanou složku klientské aplikace v projektech ASP.NET Core, které obsahují základní soubory a složky každé architektury.

Metodu popsanou v tomto článku můžete použít k vytvoření ASP.NET základních jednostrákových aplikací, které:

• Umístěte klientskou aplikaci do samostatného projektu mimo projekt ASP.NET Core.
• Vytvoření klientského projektu na základě rozhraní příkazového řádku nainstalovaného na vašem počítači

Poznámka

Tento článek popisuje proces vytváření projektu pomocí aktualizované šablony v sadě Visual Studio 2022 verze 17.8.

Požadavky

Nezapomeňte nainstalovat následující:

• Visual Studio 2022 verze 17.8 nebo novější s nainstalovanou úlohou ASP.NET a vývoje webů. Přejděte na stránku ke stažení Visual Studio a nainstalujte si Visual Studio zdarma. Pokud potřebujete nainstalovat úlohu a sadu Visual Studio už máte, přejděte na Tools>Získat nástroje a funkce..., čímž se otevře instalační program sady Visual Studio. Zvolte ASP.NET a úlohy vývoje webu a pak zvolte Upravit.
• npm (https://www.npmjs.com/), který je součástí Node.js
• Angular CLI (https://angular.dev/tools/cli), což může být verze podle vašeho výběru. Front-endový projekt se vytvoří pomocí nástrojů rozhraní příkazového řádku, které jste nainstalovali na místním počítači, takže to určuje verzi Angular použitou v šabloně.

Vytvoření front-endové aplikace

1. V okně Start (zvolte Soubor>okno Start otevřít), vyberte Vytvořit nový projekt.

   

2. Na panelu hledání v horní části vyhledejte Angular a pak vyberte Angular a ASP.NET Core.

   

3. Pojmenujte projekt AngularWithASP a pak vyberte Další.

   V dialogovém okně Další informace se ujistěte, že je Konfigurace pro HTTPS zapnuta. Ve většině scénářů ponechte ostatní nastavení na výchozích hodnotách.

4. Vyberte Vytvořit.

   Průzkumník řešení ukazuje následující:

   

   Ve srovnání s samostatnou šablonou Angularse zobrazí některé nové a upravené soubory pro integraci s ASP.NET Core:

   • aspnetcore-https.js
   • proxy.conf.js
   • package.json(změněno)
   • angular.json(změněno)
   • app.components.ts
   • app.module.ts

   Další informace o některých z těchto souborů projektu naleznete v tématu Další kroky.

Nastavení vlastností projektu

1. V Průzkumníku řešení klikněte pravým tlačítkem na projekt AngularWithASP.Server a zvolte Vlastnosti.

   

2. Na stránce Vlastnosti otevřete kartu Ladění a vyberte možnost Otevřít uživatelské rozhraní pro spuštění ladění. Zrušte zaškrtnutí možnosti Spustit prohlížeč pro profil https nebo profil pojmenovaný po projektu ASP.NET Core( pokud je k dispozici).

   

   Tato hodnota brání otevření webové stránky se zdrojovými daty o počasí.

   Poznámka

   Ve Visual Studiu launch.json uloží nastavení spuštění propojené s tlačítkem Start na panelu nástrojů Ladění. launch.json musí být umístěna ve složce .vscode.

3. Pravým tlačítkem myši klikněte na řešení v Průzkumníku řešení a vyberte Vlastnosti. Ověřte, že nastavení spouštěcího projektu jsou nastavena na Více projektů, a že akce pro oba projekty je nastavena na Spustit.

Spuštění projektu

Stisknutím klávesy F5 nebo výběrem tlačítka Start v horní části okna spusťte aplikaci. Zobrazí se dva příkazové řádky:

• Spuštěný projekt rozhraní API ASP.NET Core
• Příkaz ng start, který spouští rozhraní příkazového řádku Angular

Poznámka

Zkontrolujte výstup konzoly pro zprávy. Může se například zobrazit zpráva o aktualizaci Node.js.

Zobrazí se aplikace Angular a naplní se přes rozhraní API (port localhost se může lišit od snímku obrazovky).

Pokud nevidíte aplikaci, podívejte se na Řešení potíží.

Publikování projektu

Počínaje sadou Visual Studio 2022 verze 17.3 můžete integrované řešení publikovat pomocí nástroje Pro publikování sady Visual Studio.

Poznámka

Pokud chcete použít publikování, vytvořte projekt JavaScriptu pomocí sady Visual Studio 2022 verze 17.3 nebo novější.

1. V Průzkumníku řešení klikněte pravým tlačítkem na projekt AngularWithASP.Server a vyberte Přidat odkaz na projekt>.

   Ujistěte se, že je vybraný projekt angularwithasp.client.

2. Zvolte OK.

3. Znovu klikněte pravým tlačítkem na projekt ASP.NET Core a vyberte Upravit soubor projektu.

   Tím se otevře soubor .csproj projektu.

4. V souboru .csproj se ujistěte, že odkaz na projekt obsahuje prvek <ReferenceOutputAssembly> s hodnotou nastavenou na false.

   Tento odkaz by měl vypadat takto:

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

5. Klikněte pravým tlačítkem na projekt ASP.NET Core a zvolte Znovu načíst projekt, pokud je tato možnost dostupná.

6. V Program.csse ujistěte, že je k dispozici následující kód.

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

7. Pokud chcete publikovat, klikněte pravým tlačítkem na projekt ASP.NET Core, zvolte Publikovata vyberte možnosti, které odpovídají požadovanému scénáři publikování, jako je Azure, publikování do složky atd.

   Proces publikování trvá déle, než to dělá jenom u projektu ASP.NET Core, protože při publikování se vyvolá příkaz npm run build. Ve výchozím nastavení BuildCommand běží npm run build.

   Pokud publikujete do složky, další informace o souborech přidaných do složky publikace naleznete v části adresářová struktura ASP.NET Core.

Řešení problémů

Chyba proxy serveru

Může se zobrazit následující chyba:

[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)

Pokud se zobrazí tento problém, pravděpodobně front-end začal před back-endem.

• Jakmile se zobrazí back-endový příkazový řádek spuštěný, stačí v prohlížeči aktualizovat aplikaci Angular.
• Ověřte také, že je back-end nakonfigurovaný tak, aby se spustil před front-endem. Chcete-li to ověřit, vyberte řešení v Průzkumníku řešení, zvolte Vlastnosti z nabídky Projekt. Dále vyberte Konfigurovat projekty po spuštění a zajistěte, aby projekt ASP.NET Core byl v seznamu první. Pokud to není první, vyberte projekt a pomocí tlačítka Šipka nahoru ho nastavte jako první projekt v seznamu spuštění.

Ověření portu

Pokud se data o počasí nenačítají správně, možná budete muset ověřit, jestli jsou porty správné.

1. Přejděte do souboru launchSettings.json v projektu ASP.NET Core (ve složce Vlastnosti). Získejte číslo portu z vlastnosti applicationUrl.

   Pokud existuje více applicationUrl vlastností, vyhledejte jednu z nich pomocí koncového bodu https. Měl by vypadat podobně jako https://localhost:7049.

2. Pak přejděte do souboru proxy.conf.js projektu Angular (podívejte se do složky src). Aktualizujte cílovou vlastnost tak, aby odpovídala vlastnosti applicationUrl v launchSettings.json. Když ji aktualizujete, měla by tato hodnota vypadat nějak takto:

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

Docker

Pokud vytvoříte projekt s podporou Dockeru povolenou, proveďte následující kroky:

1. Po načtení aplikace získejte port HTTPS Dockeru použitím okna Containers ve Visual Studiu. Zkontrolujte kartu prostředí prostředí nebo porty.

   

2. Otevřete soubor proxy.conf.js pro projekt Angular. Aktualizujte proměnnou target tak, aby odpovídala portu HTTPS v okně Kontejnery. Například v následujícím kódu:

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

   Změňte https://localhost:7209 na odpovídající port HTTPS (v tomto příkladu https://localhost:62958).

3. Restartujte aplikaci.

Další kroky

Další informace o aplikacích SPA v ASP.NET Core najdete v části Angular v části Vývoj jednostránkových aplikací. Propojený článek poskytuje další kontext pro soubory projektu, jako jsou aspnetcore-https.js a proxy.conf.js, i když podrobnosti implementace se liší kvůli rozdílům v šablonách projektu. Například místo složky ClientApp jsou soubory Angular obsaženy v samostatném projektu.

Informace o nástroji MSBuild konkrétní pro klientský projekt naleznete v tématu vlastnosti nástroje MSBuild pro JSPS.