Angular

Kompletny przewodnik wdrożenia Angular na NStrim

Przegląd

Angular to framework aplikacji webowych oparty na TypeScript, opracowany przez Google. Oferuje kompleksowe rozwiązanie do budowania dynamicznych aplikacji jednostronicowych w architekturze opartej na komponentach.

Zanim zaczniesz
Upewnij się, że masz otwarty pulpit – będą ci potrzebne wyświetlone tam dane logowania do Git. Ten szablon zawiera Tailwind CSS do stylizacji.

Pierwsze kroki

1

Utwórz repozytorium z szablonu

Na pulpicie przejdź do zakładki Tools & Deployment. Kliknij przycisk "New Repository", wybierz szablon Angular z listy rozwijanej, wpisz nazwę repozytorium i subdomenę, a następnie kliknij "Create Repository".

2

Sklonuj repozytorium

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>
3

Zainstaluj zależności

npm install
4

Uruchom serwer deweloperski

npm start

Otwórz http://localhost:4200 w przeglądarce.

5

Zbuduj i wypchnij zmiany

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Każde wypchnięcie do Git automatycznie wdraża twoją aplikację. Sprawdź adres Module Work URL na pulpicie, aby zobaczyć działającą stronę.

Lokalny rozwój z Dockerem

Jeśli nie masz lokalnie zainstalowanego Node.js, możesz użyć Dockera do uruchamiania komend Angulara. Projekt zawiera Dockerfile dla buildów produkcyjnych.

Czym jest Docker?
Docker tworzy izolowane "kontenery" zawierające całe potrzebne oprogramowanie (Node.js, npm) bez instalowania ich na twoim komputerze. Można to porównać do lekkiej maszyny wirtualnej.

Wymagania wstępne

Zainstaluj Docker Desktop dla swojego systemu operacyjnego (Windows, Mac lub Linux).

Uruchamianie komend z Dockerem

# Uruchom npm install
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm install

# Uruchom serwer deweloperski (dostępny pod localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Zbuduj wersję produkcyjną
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Uwaga
Docker jest opcjonalny dla lokalnego rozwoju. Platforma NStrim obsługuje wdrożenie automatycznie – Docker jest potrzebny tylko, jeśli chcesz uruchamiać komendy lokalnie bez zainstalowanego Node.js.

Struktura projektu

Gdzie znajdują się pliki:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Komponent główny
│   │   ├── app.component.html    # Szablon główny
│   │   ├── app.component.css     # Style komponentu
│   │   ├── app.config.ts         # Konfiguracja aplikacji
│   │   └── app.routes.ts         # Konfiguracja routingu
│   ├── index.html                # Główny plik HTML
│   ├── main.ts                   # Punkt wejścia aplikacji
│   └── styles.css                # Style globalne (Tailwind)
├── public/                       # Zasoby statyczne
├── angular.json                  # Konfiguracja Angular CLI
├── package.json                  # Zależności i skrypty
├── tailwind.config.js            # Konfiguracja Tailwind CSS
├── tsconfig.json                 # Konfiguracja TypeScript
└── Dockerfile                    # Konfiguracja buildu Docker

Typowe zadania

Tworzenie nowego komponentu

ng generate component components/my-component

Tworzenie nowego serwisu

ng generate service services/my-service

Dodawanie trasy

Edytuj src/app/app.routes.ts:

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Korzystanie z Tailwind CSS

Tailwind jest wstępnie skonfigurowany. Używaj klas bezpośrednio w szablonach:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Przydatne komendy

npm start Uruchom serwer deweloperski (port 4200)
npm run build Zbuduj wersję produkcyjną
npm test Uruchom testy jednostkowe
ng generate component Utwórz nowy komponent
ng generate service Utwórz nowy serwis
ng generate --help Wyświetl wszystkie dostępne generatory

Rozwiązywanie problemów

npm install kończy się błędami uprawnień

Przyczyna: Problemy z uprawnieniami do cache npm lub node_modules.

Rozwiązanie: Usuń folder node_modules i plik package-lock.json, a następnie ponownie uruchom npm install.

Port 4200 jest już używany

Przyczyna: Inny proces używa portu 4200.

Rozwiązanie: Użyj innego portu: ng serve --port 4201 lub zatrzymaj inny proces.

Błędy "Module not found"

Przyczyna: Zależności nie są zainstalowane lub są uszkodzone.

Rozwiązanie: Uruchom npm install, aby zainstalować wszystkie zależności.

Zmiany nie pojawiają się w przeglądarce

Przyczyna: Cache przeglądarki lub niedziałający live reload.

Rozwiązanie: Odśwież z pominięciem cache (Ctrl+Shift+R lub Cmd+Shift+R) albo zrestartuj serwer dev.

Build kończy się błędem po wdrożeniu

Przyczyna: Błędy buildu lub brakujące zależności.

Rozwiązanie: Najpierw uruchom npm run build lokalnie, aby sprawdzić błędy przed wypchnięciem zmian.

Proces wdrażania

Za każdym razem, gdy wypychasz kod do Git, twoja aplikacja jest automatycznie budowana i wdrażana:

Zmiana kodu git push npm run build Wdrożenie na nginx Live!

Adres URL twojej wdrożonej aplikacji ma następujący format: 

https://<your-subdomain>-<repo-name>.<session-domain>

Przykład: https://student01-module-a.demo.nstrim.app

Aby uzyskać więcej informacji, odwiedź oficjalną Dokumentację Angulara.