Použití šablony projektu Angular s ASP.NET Core

Článek
11/06/2024

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete v tomto článku ve verzi .NET 9.

Visual Studio poskytuje šablony projektů pro vytváření jednostrákových aplikací (SPA) založených na architekturách JavaScriptu, jako jsou Angular, React a Vue , které mají back-end ASP.NET Core. Tyto šablony:

Vytvořte řešení sady Visual Studio s front-endovým projektem a back-endovým projektem.
Pro front-end použijte typ projektu sady Visual Studio pro JavaScript a TypeScript (.esproj).
Pro back-end použijte projekt ASP.NET Core.

Projekty vytvořené pomocí šablon sady Visual Studio je možné spustit z příkazového řádku ve Windows, Linuxu a macOS. Pokud chcete aplikaci spustit, použijte dotnet run --launch-profile https ji ke spuštění serverového projektu. Spuštění serverového projektu automaticky spustí front-endový vývojový server JavaScriptu. V https současné době se vyžaduje spouštěcí profil.

Kurz k sadě Visual Studio

Pokud chcete začít s projektem Angular, postupujte podle kurzu Vytvoření aplikace ASP.NET Core pomocí Angular v dokumentaci k sadě Visual Studio.

Další informace najdete v tématu JavaScript a TypeScript v sadě Visual Studio.

šablony ASP.NET Core SPA

Visual Studio obsahuje šablony pro vytváření aplikací ASP.NET Core pomocí front-endu JavaScriptu nebo TypeScriptu. Tyto šablony jsou k dispozici v sadě Visual Studio 2022 verze 17.8 nebo novější s nainstalovanou úlohou vývoje pro ASP.NET a web .

Šablony sady Visual Studio pro vytváření aplikací ASP.NET Core s front-endem JavaScriptu nebo TypeScriptu nabízejí následující výhody:

Vyčištění oddělení projektů pro front-end a back-end
Mějte přehled o nejnovějších verzích front-endové architektury.
Integrace s nejnovějšími nástroji příkazového řádku front-endové architektury, jako je Vite.
Šablony pro JavaScript i TypeScript (pouze TypeScript pro Angular).
Bohaté prostředí pro úpravy kódu v JavaScriptu a TypeScriptu
Integrujte nástroje sestavení JavaScriptu s sestavením .NET.
npm dependency management UI.
Kompatibilní s laděním a spuštěním editoru Visual Studio Code.
Spouštění testů částí front-endu v Průzkumníku testů pomocí testovacích architektur JavaScriptu

Starší verze šablon ASP.NET Core SPA

Starší verze sady .NET SDK obsahovaly starší šablony pro vytváření aplikací SPA pomocí ASP.NET Core. Dokumentaci k těmto starším šablonám najdete v článcích o ASP.NET Core 7.0 přehledu spa a článcích o Angular a Reactu .

Šablona projektu ASP.NET Core s Angular poskytuje pohodlný výchozí bod pro aplikace ASP.NET Core pomocí Angular a Angular CLI k implementaci bohatého uživatelského rozhraní na straně klienta.

Šablona projektu je ekvivalentní vytvoření projektu ASP.NET Core, který bude fungovat jako webové rozhraní API, a projekt Rozhraní příkazového řádku Angular, který bude fungovat jako uživatelské rozhraní. Tato kombinace projektu nabízí pohodlí hostování obou projektů v jednom projektu ASP.NET Core, který lze sestavit a publikovat jako jednu jednotku.

Šablona projektu není určená pro vykreslování na straně serveru (SSR).

Vytvoření nové aplikace

Pomocí příkazu dotnet new angular v prázdném adresáři vytvořte nový projekt z příkazového řádku. Například následující příkazy vytvoří aplikaci v my-new-app adresáři a přepne do tohoto adresáře:

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

Spusťte aplikaci ze sady Visual Studio nebo rozhraní příkazového řádku .NET:

Visual Studio
.NET CLI

Otevřete vygenerovaný .csproj soubor a spusťte aplikaci normálně.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Další buildy jsou mnohem rychlejší.

Ujistěte se, že máte proměnnou prostředí volanou ASPNETCORE_ENVIRONMENT s hodnotou Development. Ve Windows (v jiných než PowerShellových výzev) spusťte SET ASPNETCORE_ENVIRONMENT=Developmentpříkaz . V Linuxu nebo macOS spusťte export ASPNETCORE_ENVIRONMENT=Developmentpříkaz .

Spuštěním dotnet buildu ověřte správné sestavení aplikace. Při prvním spuštění proces sestavení obnoví závislosti npm, což může trvat několik minut. Další buildy jsou mnohem rychlejší.

Spuštěním příkazu dotnet spusťte aplikaci.

Šablona projektu vytvoří aplikaci ASP.NET Core a aplikaci Angular. Aplikace ASP.NET Core je určená k použití pro přístup k datům, autorizaci a další aspekty na straně serveru. Aplikace Angular, která se nachází v ClientApp podadresáři, je určená k použití pro všechny aspekty uživatelského rozhraní.

Přidání stránek, obrázků, stylů a modulů

Adresář ClientApp obsahuje standardní aplikaci Rozhraní příkazového řádku Angular. Další informace najdete v oficiální dokumentaci k Angular.

Mezi aplikací Angular vytvořenou touto šablonou a samotnou aplikací Angular CLI (prostřednictvím ng new); možnosti aplikace se však nemění. Aplikace vytvořená šablonou obsahuje rozložení založené na bootstrapu a základní příklad směrování.

Spuštění příkazů ng

V příkazovém řádku přepněte do ClientApp podadresáře:

cd ClientApp

Pokud máte ng nástroj nainstalovaný globálně, můžete spustit kterýkoli z jeho příkazů. Můžete například spustit ng lint, ng testnebo kterýkoli z dalších příkazů Angular CLI. Není ale nutné spouštět ng serve , protože vaše aplikace ASP.NET Core se zabývá obsluhou částí aplikace na straně serveru i na straně klienta. Interně se používá ng serve ve vývoji.

Pokud nástroj nemáte ng nainstalovaný, spusťte npm run ng ho. Můžete například spustit npm run ng lint nebo npm run ng test.

Instalace balíčků npm

K instalaci balíčků npm třetích stran použijte příkazový řádek v ClientApp podadresáři. Příklad:

cd ClientApp
npm install <package_name>

Publikování a nasazení

Ve vývoji se aplikace spouští v režimu optimalizovaném pro usnadnění vývoje. Sady JavaScriptu například obsahují zdrojové mapy (takže při ladění uvidíte původní kód TypeScriptu). Aplikace sleduje změny souborů TypeScript, HTML a CSS na disku a automaticky se znovu kompiluje a načítá, když se tyto soubory změní.

V produkčním prostředí obsluhujte verzi aplikace, která je optimalizovaná pro výkon. To se konfiguruje automaticky. Když publikujete, konfigurace sestavení vygeneruje zkompilovaný předem zkompilovaný build kódu na straně klienta. Na rozdíl od vývojového sestavení nevyžaduje produkční sestavení Uzel.js pokud jste nepovolili vykreslování na straně serveru (SSR)

Můžete použít standardní metody hostování a nasazení ASP.NET Core.

Spustit "ng serve" nezávisle

Projekt je nakonfigurovaný tak, aby spustil vlastní instanci serveru Angular CLI na pozadí, když se aplikace ASP.NET Core spustí ve vývojovém režimu. To je praktické, protože nemusíte spouštět samostatný server ručně.

Toto výchozí nastavení má nevýhodu. Pokaždé, když upravíte kód jazyka C# a aplikace ASP.NET Core se musí restartovat, server Rozhraní příkazového řádku Angular se restartuje. K spuštění zálohování je potřeba přibližně 10 sekund. Pokud provádíte časté úpravy kódu c# a nechcete čekat na restartování Angular CLI, spusťte server Angular CLI externě nezávisle na procesu ASP.NET Core.

Pokud chcete server Angular CLI spustit externě, přepněte do ClientApp podadresáře na příkazovém řádku a spusťte vývojový server Angular CLI:

cd ClientApp
npm start

Když spustíte aplikaci ASP.NET Core, nespustí se server Angular CLI. Místo toho se použije instance, kterou jste spustili ručně. To umožňuje spustit a restartovat rychleji. Už nečeká, až Angular CLI pokaždé znovu sestaví vaši klientskou aplikaci.

Při spuštění proxy serveru se cílová adresa URL a port odvozují z proměnných prostředí nastavených rozhraním .NET ASPNETCORE_URLS a ASPNETCORE_HTTPS_PORTS. Pokud chcete nastavit adresy URL nebo port HTTPS, použijte některou z proměnných prostředí nebo změňte hodnotu v proxy.conf.json.

Konfigurace middlewaru proxy pro SignalR

Další informace najdete v tématu http-proxy-middleware.

Další materiály

Použití Identity k zabezpečení back-endu webového rozhraní API pro služby SPA

Aktualizovaná šablona projektu Angular poskytuje pohodlný výchozí bod pro aplikace ASP.NET Core pomocí Angular a Rozhraní příkazového řádku Angular k implementaci bohatého uživatelského rozhraní na straně klienta.

Šablona je ekvivalentní vytvoření projektu ASP.NET Core, který bude fungovat jako back-end rozhraní API a projekt Rozhraní příkazového řádku Angular, který bude fungovat jako uživatelské rozhraní. Šablona nabízí pohodlí hostování obou typů projektů v jednom projektu aplikace. V důsledku toho je možné projekt aplikace sestavit a publikovat jako jednu jednotku.

Vytvoření nové aplikace

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

Spusťte aplikaci ze sady Visual Studio nebo rozhraní příkazového řádku .NET:

Visual Studio
.NET CLI

Otevřete vygenerovaný .csproj soubor a spusťte aplikaci normálně.

Proces sestavení obnoví závislosti npm při prvním spuštění, což může trvat několik minut. Další buildy jsou mnohem rychlejší.

Spuštěním příkazu dotnet spusťte aplikaci. Zaprotokoluje se zpráva podobná následující:

Now listening on: http://localhost:<port>

V prohlížeči přejděte na tuto adresu URL.

Upozorňující

Aplikace spustí instanci serveru Rozhraní příkazového řádku Angular na pozadí. Zaprotokoluje se zpráva podobná této: NG Live Development Server naslouchá na localhost:<otherport>, otevřete prohlížeč pro http://localhost:<jiný port>/. Tuto zprávu ignorujte – nejedná se o adresu URL kombinované aplikace ASP.NET Core a Angular CLI.

Přidání stránek, obrázků, stylů a modulů

Adresář ClientApp obsahuje standardní aplikaci Rozhraní příkazového řádku Angular. Další informace najdete v oficiální dokumentaci k Angular.

Spuštění příkazů ng

V příkazovém řádku přepněte do ClientApp podadresáře:

cd ClientApp

Pokud nástroj nemáte ng nainstalovaný, spusťte npm run ng ho. Můžete například spustit npm run ng lint nebo npm run ng test.

Instalace balíčků npm

K instalaci balíčků npm třetích stran použijte příkazový řádek v ClientApp podadresáři. Příklad:

cd ClientApp
npm install --save <package_name>

Publikování a nasazení

Můžete použít standardní metody hostování a nasazení ASP.NET Core.

Spustit "ng serve" nezávisle

V příkazovém řádku přepněte do ClientApp podadresáře a spusťte vývojový server Angular CLI:
```
cd ClientApp
npm start
```
Důležité

Slouží npm start ke spuštění vývojového serveru Angular CLI, ne ng servetak, aby se konfigurace package.json respektovala. Pokud chcete serveru Angular CLI předat další parametry, přidejte je do příslušného scripts řádku v package.json souboru.
Upravte aplikaci ASP.NET Core tak, aby místo spuštění vlastní instance rozhraní příkazového řádku Angular používala externí instanci Rozhraní příkazového řádku. Ve třídě Startup nahraďte spa.UseAngularCliServer vyvolání následujícím kódem:
```
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
```

Předání dat z kódu .NET do kódu TypeScriptu

Během SSR můžete do aplikace Angular předávat data jednotlivých požadavků z aplikace ASP.NET Core. Můžete například předat cookie informace nebo něco číst z databáze. Uděláte to tak, že upravíte třídu Startup . V zpětném volání pro UseSpaPrerendering, nastavte hodnotu pro options.SupplyData , například následující:

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

Zpětné SupplyData volání umožňuje předat libovolná data serializovatelná podle požadavku, JSON (například řetězce, logické hodnoty nebo čísla). Váš main.server.ts kód ho obdrží jako params.data. Například předchozí ukázka kódu předá logickou hodnotu jako params.data.isHttpsRequest do zpětného createServerRenderer volání. Tuto možnost můžete předat jiným částem aplikace jakýmkoli způsobem, který Angular podporuje. Podívejte se například, jak main.server.ts předá BASE_URL hodnotu libovolné komponentě, jejíž konstruktor je deklarován k přijetí.

Nevýhody SSR

Ne všechny aplikace využívají SSR. Hlavním přínosem je vnímaný výkon. Návštěvníci, kteří se dostanou k aplikaci přes pomalé síťové připojení nebo na pomalých mobilních zařízeních, rychle uvidí počáteční uživatelské rozhraní, i když načítání nebo parsování sad JavaScriptu nějakou dobu trvá. Mnoho spA se ale používá hlavně v rychlých podnikových sítích na rychlých počítačích, kde se aplikace zobrazuje téměř okamžitě.

Současně existují významné nevýhody povolení SSR. Zvyšuje složitost procesu vývoje. Váš kód musí běžet ve dvou různých prostředích: na straně klienta a na straně serveru (v node.js prostředí vyvolané z ASP.NET Core). Tady je několik věcí, které byste měli mít na paměti:

SSR vyžaduje uzel.js instalace na produkčních serverech. To se automaticky týká některých scénářů nasazení, jako jsou služby Aplikace Azure, ale ne pro jiné, jako je Azure Service Fabric.
Povolení příznaku BuildServerSideRenderer sestavení způsobí , že se adresář node_modules publikuje. Tato složka obsahuje více než 20 000 souborů, což zvyšuje dobu nasazení.
Spuštění kódu v uzlujs prostředí, nemůže spoléhat na existenci javascriptových rozhraní API specifických pro prohlížeč, jako window je nebo localStorage. Pokud se váš kód (nebo některá knihovna třetí strany, na kterou odkazujete), pokusí použít tato rozhraní API, zobrazí se během SSR chyba. Nepoužívejte například jQuery, protože odkazuje na rozhraní API specifická pro prohlížeč na mnoha místech. Abyste zabránili chybám, musíte se vyhnout rozhraním API nebo knihovnám specifickým pro prohlížeč. Všechna volání těchto rozhraní API můžete zabalit do kontrol, aby se zajistilo, že se během SSR nevyvolají. Například použijte kontrolu, například následující kód v JavaScriptu nebo TypeScriptu:

if (typeof window !== 'undefined') {
    // Call browser-specific APIs here
}

Konfigurace middlewaru proxy pro SignalR

Další informace najdete v tématu http-proxy-middleware.

Další materiály

Použití Identity k zabezpečení back-endu webového rozhraní API pro služby SPA

Sdílet prostřednictvím

Použití šablony projektu Angular s ASP.NET Core

Kurz k sadě Visual Studio

šablony ASP.NET Core SPA

Starší verze šablon ASP.NET Core SPA

Vytvoření nové aplikace

Přidání stránek, obrázků, stylů a modulů

Spuštění příkazů ng

Instalace balíčků npm

Publikování a nasazení

Spustit "ng serve" nezávisle

Konfigurace middlewaru proxy pro SignalR

Další materiály

Vytvoření nové aplikace

Přidání stránek, obrázků, stylů a modulů

Spuštění příkazů ng

Instalace balíčků npm

Publikování a nasazení

Spustit "ng serve" nezávisle

Předání dat z kódu .NET do kódu TypeScriptu

Nevýhody SSR

Konfigurace middlewaru proxy pro SignalR

Další materiály

Další materiály