Visual Studio 2026 i ASP.NET Core — środowisko pracy

Po co się tego uczymy?

Zanim napiszesz jakikolwiek kod, musisz mieć gotowe, poprawnie skonfigurowane środowisko pracy. W tym dziale będziesz łączyć DWIE technologie naraz (Angular na front-endzie, ASP.NET Core na backendzie) — dobra wiadomość jest taka, że Visual Studio 2026, którego używałeś już w działach WPF i MAUI, obsługuje OBIE naraz, w jednym miejscu. Ta lekcja tłumaczy, dlaczego akurat to środowisko, co ono realnie daje, i czego dodatkowo będziesz potrzebować.

Teoria

Dlaczego Visual Studio, a nie inny edytor? Do tworzenia aplikacji webowych można używać wielu narzędzi — Visual Studio Code, WebStorm, a nawet zwykłego edytora tekstu z terminalem. Kurs bitedu.pl konsekwentnie wybiera Visual Studio 2026 (pełną, "dużą" wersję, nie mylić z Visual Studio Code — to DWA różne produkty Microsoftu), bo:

to TO SAMO IDE, którego używałeś w działach WPF i MAUI — mniej rzeczy do nauczenia się na nowo (te same skróty klawiszowe, ten sam debugger, ten sam Eksplorator rozwiązań);
ma OFICJALNE, gotowe szablony projektów łączące ASP.NET Core z Angularem w jednym rozwiązaniu (solution) — nie trzeba ręcznie "sklejać" dwóch osobnych projektów;
ma wbudowaną obsługę TypeScriptu i npm (menedżera pakietów Node.js) — dodatkowe narzędzia frontendowe działają "od ręki" po doinstalowaniu jednego obciążenia (workload);
potężny debugger pozwalający stawiać punkty przerwania (breakpointy) zarówno w kodzie C# (backend), jak i — po skonfigurowaniu — w kodzie TypeScript (frontend).

Plusy i minusy tego środowiska (uczciwe zestawienie, bez pomijania wad):

Plusy	Minusy
Jeden program do backendu i frontendu naraz	Cięższe, wolniej się uruchamia niż lekki edytor typu VS Code
Świetny debugger i IntelliSense (podpowiedzi kodu) dla C#	Wsparcie dla TypeScript/Angular jest dobre, ale NIE tak rozbudowane jak w dedykowanych narzędziach (VS Code + rozszerzenia, WebStorm)
Gotowe szablony projektów (mniej ręcznej konfiguracji na start)	Wymaga dużo miejsca na dysku i pamięci RAM
Spójność z resztą kursu (WPF, MAUI) — jedno środowisko do wszystkiego	W prawdziwej pracy zawodowej programiści Angular często preferują VS Code — warto znać obie opcje

Co realnie możemy zrobić w Visual Studio 2026 w kontekście tego działu: utworzyć nowy projekt z szablonu łączącego ASP.NET Core i Angular, edytować kod C# (backend) z pełnym IntelliSense, edytować pliki TypeScript/HTML Angulara (podstawowe podświetlanie składni i uzupełnianie), uruchomić CAŁĄ aplikację (backend + frontend naraz) jednym kliknięciem "Uruchom", debugować backend krok po kroku, oraz korzystać z wbudowanego terminala do poleceń npm/ng (Angular CLI).

Co MAMY domyślnie po instalacji Visual Studio 2026 z obciążeniem "ASP.NET and web development": kompilator C#, .NET SDK, szablony projektów ASP.NET Core, oraz (w nowszych wersjach) zintegrowaną obsługę Node.js.

Czego DODATKOWO potrzebujemy (trzeba zainstalować OSOBNO, poza samym Visual Studio):

Narzędzie	Po co	Skąd wziąć
Node.js (wersja LTS)	środowisko uruchomieniowe JavaScript/TypeScript poza przeglądarką — Angular go potrzebuje do budowania i uruchamiania projektu	nodejs.org
Angular CLI	narzędzie wiersza poleceń do tworzenia projektów/komponentów Angular jedną komendą	`npm install -g @angular/cli` (po zainstalowaniu Node.js)
Obciążenie "Node.js development" w instalatorze Visual Studio	integracja edytora z projektami Node.js/Angular wewnątrz Visual Studio	Visual Studio Installer → Modyfikuj

Bez zainstalowanego Node.js szablon projektu "ASP.NET Core with Angular" w ogóle się NIE uruchomi poprawnie — Visual Studio w tle wywołuje polecenia npm install/ng serve, które wymagają obecności Node.js w systemie.

Schemat

Visual Studio 2026 (jedno IDE)
        │
        ├── ASP.NET Core (C#, kompilator .NET) ──── WBUDOWANE po instalacji
        │                                            obciążenia "ASP.NET and
        │                                            web development"
        │
        └── Obsługa Angular/TypeScript/npm ──────── WYMAGA dodatkowo:
                                                      • Node.js (nodejs.org)
                                                      • Angular CLI (npm install -g @angular/cli)
                                                      • obciążenia "Node.js development"

Uruchomienie projektu w VS ("Uruchom" / F5)
        │
        ├── Kestrel (serwer ASP.NET Core, backend)   http://localhost:5001 (przykładowo)
        │
        └── ng serve (serwer deweloperski Angular)   http://localhost:4200
                    │
                    ▼
        Przeglądarka otwiera aplikację frontendową,
        która komunikuje się z backendem przez HTTP/JSON

Przykład z życia

Dokładnie tak samo, jak w działach WPF i MAUI otwierałeś Visual Studio i od razu miałeś dostęp do wszystkiego, czego potrzeba (kompilator, debugger, szablony) — tutaj też jedna instalacja, jedno IDE, tylko z dodatkowym krokiem: doinstalowaniem Node.js, bo Angular "żyje" w innym świecie technologicznym (JavaScript/TypeScript) niż C#, i potrzebuje własnego środowiska uruchomieniowego.

Ćwiczenie samodzielne

Sprawdź, czy masz zainstalowane: Visual Studio 2026 z obciążeniem "ASP.NET and web development" ORAZ "Node.js development", a także Node.js (sprawdź w terminalu poleceniem node -v) i Angular CLI (ng version). Jeśli czegoś brakuje, zainstaluj brakujący element zanim przejdziesz do kolejnej lekcji.

Zadania do pracy własnej

Sprawdź w terminalu (Wiersz polecenia albo terminal wewnątrz Visual Studio) wersję zainstalowanego Node.js (node -v) i npm (npm -v) — zapisz obie wersje.
Przygotuj krótką notatkę (5-6 punktów) porównującą Visual Studio 2026 z Visual Studio Code pod kątem pracy z Angularem — kiedy który wybrałbyś Ty i dlaczego, biorąc pod uwagę, że resztę kursu (WPF, MAUI) robisz w "dużym" Visual Studio.
Zainstaluj (jeśli jeszcze nie masz) Node.js LTS i Angular CLI, a następnie w terminalu wykonaj ng version i przeanalizuj wypisane informacje — zapisz, jaka wersja Angular CLI i Node.js zostały wykryte, i sprawdź w dokumentacji Angular.dev, czy ta wersja Node.js jest nadal wspierana przez aktualną wersję Angulara.

Typowe błędy

Mylenie Visual Studio z Visual Studio Code — to dwa RÓŻNE produkty Microsoftu o podobnej nazwie; ten kurs (spójnie z WPF/MAUI) używa "dużego" Visual Studio 2026, a nie lekkiego edytora VS Code.

Próba utworzenia projektu Angular w Visual Studio bez wcześniej zainstalowanego Node.js — szablon projektu wyświetli błędy podczas tworzenia lub pierwszego uruchomienia (npm install kończy się niepowodzeniem), bo cały ekosystem Angular jest zbudowany na Node.js.

Pomijanie obciążenia "Node.js development" przy instalacji Visual Studio — bez niego brakuje integracji edytora z plikami .ts, projektami npm i terminalem rozpoznającym polecenia ng.

Nawiązanie do egzaminu zawodowego

To realizacja INF.04.7.1 ("wykorzystuje środowisko programistyczne dla aplikacji webowych") — podstawa programowa wymienia Visual Studio jako jedno z akceptowanych środowisk (obok Eclipse, JetBrains). Kolejna lekcja przechodzi do praktyki: tworzenia pierwszego prawdziwego projektu łączącego Angular i ASP.NET Core.