Instalacja i pierwszy ekran

Czego się dziś nauczysz

Przygotowanie: brak — to pierwsza lekcja. Potrzebujesz komputera z Windows 10/11, dostępu do internetu i edytora VS Code. Przewidywany czas: 2 × 45 min z zadaniami.

Po co osobne narzędzia

Zwykłą stronę HTML wystarczy otworzyć w przeglądarce. Angular tak nie działa: kod, który piszesz, jest najpierw tłumaczony (kompilowany), a dopiero wynik trafia do przeglądarki. Dlatego potrzebny jest program, który to tłumaczenie wykonuje i podaje gotowy wynik — serwer deweloperski.

Do pracy potrzebujesz trzech programów. Instalujesz dwa, trzeci przychodzi w pakiecie:

Wszystkie polecenia z tego kursu wpisujesz w terminalu. W VS Code otwierasz go z menu Terminal → New Terminal albo skrótem Ctrl+` (klawisz pod Esc). Terminal otwiera się w folderze, który masz otwarty w VS Code — to ważne, bo większość poleceń działa tylko w folderze projektu.

Zmienne środowiskowe i Path — skąd system wie, gdzie jest ng

Gdy wpisujesz w terminalu node albo ng, system nie przeszukuje całego dysku. Zagląda tylko do folderów wymienionych w zmiennej środowiskowej Path. Zmienna środowiskowa to po prostu nazwa z przypisaną wartością, którą system przechowuje dla wszystkich programów — a wartością Path jest lista folderów rozdzielonych średnikami.

Dla Angulara ważne są dwa wpisy:

Jak sprawdzić, co jest w Path

$env:Path -split ';'      # wypisuje foldery z Path, każdy w osobnym wierszu
where.exe node            # pokazuje, gdzie system znalazł node.exe
where.exe ng              # to samo dla ng (zadziała po instalacji CLI)
npm config get prefix     # folder, do którego npm instaluje programy globalne

C:\Program Files\nodejs\node.exe

Jak dopisać brakujący folder

1. Naciśnij Win+R, wpisz sysdm.cpl i zatwierdź. Przejdź na kartę Zaawansowane i kliknij Zmienne środowiskowe….
   Bez uprawnień administratora: w menu Start wpisz „Edytuj zmienne środowiskowe dla konta” — otworzy się okno tylko ze zmiennymi Twojego konta.
2. W górnej części (Zmienne użytkownika) zaznacz Path i kliknij Edytuj….
3. Kliknij Nowy i wklej brakujący folder, np. wynik polecenia npm config get prefix.
4. Zatwierdź wszystkie okna przyciskiem OK.
5. Zamknij całe VS Code (nie tylko terminal) i otwórz je ponownie.

Sprawdź, czy masz czym pracować

Zanim cokolwiek zainstalujesz, sprawdź, co już jest na komputerze. Otwórz VS Code, potem terminal, i wpisz dwa polecenia.

node --version
npm --version

v24.21.0
11.6.2

Dwa numery wersji oznaczają, że Node.js i npm są zainstalowane i widoczne w Path. Liczba przed pierwszą kropką to wersja główna. Jeśli zamiast numeru widzisz komunikat „Termin node nie jest rozpoznawany…”, Node.js nie jest zainstalowany albo jego folder nie trafił do Path — wróć do poprzedniej sekcji.

Zainstaluj Angular CLI

CLI instalujesz raz, globalnie — przełącznik -g sprawia, że program trafia do folderu z Path, a nie do jednego projektu.

npm install -g @angular/cli
ng version

Przy pierwszym uruchomieniu ng zada dwa pytania. Pojawiają się tylko raz na komputerze:

Angular CLI       : 22.2.2
Node.js           : 24.21.0
Package Manager   : npm 11.6.2
Operating System  : win32 x64

Logo Angulara i tabela wersji oznaczają sukces. Jeśli zamiast tego widzisz czerwony komunikat o ng.ps1 — to najczęstszy problem pierwszego uruchomienia. Opis i naprawa są w następnej sekcji.

Pierwsze uruchomienie w VS Code — czego się spodziewać

Prawie każdy, kto pierwszy raz uruchamia Angulara w VS Code na Windows, trafia na co najmniej jeden z poniższych komunikatów. Żaden nie oznacza, że coś jest zepsute na stałe.

1. „Uruchamianie skryptów jest wyłączone w tym systemie”

ng : Nie można załadować pliku C:\Users\uczen\AppData\Roaming\npm\ng.ps1,
ponieważ uruchamianie skryptów jest wyłączone w tym systemie.
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

Domyślnym terminalem w VS Code jest PowerShell, który ze względów bezpieczeństwa nie uruchamia skryptów .ps1 — a npm instaluje ng właśnie jako skrypt ng.ps1. Ten sam komunikat może dotyczyć npm.ps1. Masz trzy wyjścia, od najlepszego:

Command Prompt włączysz w VS Code strzałką obok znaku + w panelu terminala → Command Prompt. Żeby był domyślny: ta sama strzałka → Select Default Profile → Command Prompt. Jeszcze jedna droga awaryjna: zamiast ng wpisz ng.cmd — omija skrypt .ps1.

2. „Termin ng nie jest rozpoznawany”

ng : Termin „ng” nie jest rozpoznawany jako nazwa polecenia cmdlet, funkcji,
pliku skryptu lub programu wykonywalnego.

System nie znalazł ng w żadnym folderze z Path. Sprawdź po kolei: czy instalacja npm install -g @angular/cli zakończyła się bez czerwonych błędów; czy zamknąłeś i otworzyłeś całe VS Code po instalacji; czy folder z npm config get prefix jest w Path (sekcja wyżej). W Command Prompt ten sam problem wygląda tak: „’ng’ nie jest rozpoznawane jako polecenie wewnętrzne lub zewnętrzne…”.

3. Okna, które pokaże samo VS Code

Utwórz projekt i uruchom serwer

Jedno polecenie tworzy komplet plików i pobiera biblioteki. Przełączniki odpowiadają z góry na pytania, które CLI zadałoby po kolei: zwykły CSS, bez renderowania po stronie serwera i bez plików dla narzędzi AI.

ng new klub-gier --style=css --ssr=false --ai-config=none
cd klub-gier
npm start

✔ Packages installed successfully.
...
Application bundle generation complete.

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/

Instalacja bibliotek trwa od kilkunastu sekund do kilku minut. Gdy w terminalu pojawi się adres http://localhost:4200/, otwórz go w przeglądarce (z Ctrl kliknięcie w adres w terminalu) — zobaczysz stronę powitalną Angulara.

Teraz otwórz projekt w edytorze: File → Open Folder… → folder klub-gier. Od tej chwili terminal w VS Code otwiera się już w folderze projektu.

npm start uruchamia serwer deweloperski — robi to samo co ng serve. Serwer działa, dopóki nie zamkniesz terminala albo nie naciśniesz Ctrl+C.

Zmień jeden napis

Najkrótsza droga do zobaczenia, że to naprawdę Twój projekt. Plik app.html zawiera kilkaset wierszy strony powitalnej — usuń je wszystkie.

<h1>Klub gier — ekran startowy</h1>
<p>Tu wkrótce pojawi się lista wydarzeń.</p>

Zapisz plik (Ctrl+S) i nie odświeżaj strony ręcznie. Przeglądarka sama pokaże nowy tekst w ułamku sekundy — serwer obserwuje pliki i po każdym zapisie przebudowuje aplikację. To przeładowanie na żywo.

Klub gier — ekran startowy
Tu wkrótce pojawi się lista wydarzeń.

W terminalu pojawi się jednocześnie żółty komunikat:

▲ [WARNING] NG8113: All imports are unused
    src/app/app.ts:5:2:
      5 │   imports: [RouterOutlet],

To ostrzeżenie, nie błąd — strona działa. Usunięta strona powitalna zawierała znacznik, który korzystał z RouterOutlet; teraz ten import nie jest potrzebny. W następnej lekcji uporządkujesz plik app.ts i ostrzeżenie zniknie.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Angular potrzebuje Node.js (z npm) i Angular CLI; Angular 22 wymaga Node.js 22.22.3+, 24.15+ albo 26+.
• System szuka programów tylko w folderach z Path; po zmianie Path albo instalacji zamknij całe VS Code.
• where.exe i npm config get prefix mówią, gdzie leżą programy.
• Błąd ng.ps1 naprawia Set-ExecutionPolicy -Scope CurrentUser RemoteSigned, terminal Command Prompt albo ng.cmd.
• ng new tworzy projekt raz; npm start uruchamia serwer na każdych zajęciach.
• Polecenia projektu wpisujesz w terminalu otwartym w folderze projektu.
• Strona działa pod http://localhost:4200/, dopóki działa serwer; Ctrl+C go zatrzymuje.
• Zapisanie pliku odświeża stronę samo.
• Żółte WARNING — aplikacja działa; czerwone ERROR — czytaj pierwszy komunikat, podaje plik i wiersz.

Sprawdź się: kolega zainstalował Node.js przy otwartym VS Code i dostaje komunikat, że node nie jest rozpoznawany. Co mu poradzisz w pierwszej kolejności i dlaczego?

Dokumentacja: angular.dev — przygotowanie środowiska.