Angular

Pilnas diegimo vadovas, skirtas Angular NStrim platformoje

Apžvalga

Angular yra TypeScript pagrindu sukurtas žiniatinklio aplikacijų karkasas, kurį sukūrė Google. Jis suteikia visapusišką sprendimą dinamiškoms vieno puslapio aplikacijoms kurti naudojant komponentų architektūrą.

Prieš pradėdami
Įsitikinkite, kad jūsų valdymo skydelis atidarytas - jums reikės ten rodomų Git prisijungimo duomenų. Šiame šablone yra Tailwind CSS stilių apipavidalinimui.

Greitas startas

1

Sukurkite repozitoriją iš šablono

Valdymo skydelyje pereikite į skirtuką Tools & Deployment. Spauskite mygtuką "New Repository", išskleidžiamame sąraše pasirinkite Angular šabloną, įveskite repozitorijos pavadinimą ir subdomeną, tada spauskite "Create Repository".

2

Klonuokite savo repozitoriją

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

Įdiekite priklausomybes

npm install
4

Paleiskite kūrimo serverį

npm start

Naršyklėje atidarykite http://localhost:4200.

5

Sukompiliuokite ir įkelkite

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Kiekvienas push į Git automatiškai įdiegia jūsų aplikaciją. Patikrinkite Modulio darbo URL valdymo skydelyje, kad pamatytumėte savo gyvą svetainę.

Vietinis kūrimas su Docker

Jei vietoje neturite įdiegto Node.js, galite naudoti Docker Angular komandoms vykdyti. Projekte yra Dockerfile produkcijos versijoms kompiliuoti.

Kas yra Docker?
Docker sukuria izoliuotus „konteinerius" su visa reikalinga programine įranga (Node.js, npm) jos neįdiegiant į jūsų kompiuterį. Įsivaizduokite tai kaip lengvą virtualią mašiną.

Reikalavimai

Įdiekite Docker Desktop savo operacinei sistemai (Windows, Mac arba Linux).

Komandų vykdymas su Docker

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

# Paleisti kūrimo serverį (pasiekiamas adresu localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Sukompiliuoti produkcijai
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Pastaba
Docker yra neprivalomas vietiniam kūrimui. NStrim platforma diegimą tvarko automatiškai - Docker reikia tik tuomet, jei norite vykdyti komandas vietoje neįdiegę Node.js.

Projekto struktūra

Kur yra failai:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Šaknies komponentas
│   │   ├── app.component.html    # Šaknies šablonas
│   │   ├── app.component.css     # Komponento stiliai
│   │   ├── app.config.ts         # Aplikacijos konfigūracija
│   │   └── app.routes.ts         # Maršrutų konfigūracija
│   ├── index.html                # Pagrindinis HTML failas
│   ├── main.ts                   # Aplikacijos įėjimo taškas
│   └── styles.css                # Globalūs stiliai (Tailwind)
├── public/                       # Statiniai resursai
├── angular.json                  # Angular CLI konfigūracija
├── package.json                  # Priklausomybės ir skriptai
├── tailwind.config.js            # Tailwind CSS konfigūracija
├── tsconfig.json                 # TypeScript konfigūracija
└── Dockerfile                    # Docker kompiliavimo konfigūracija

Įprastos užduotys

Naujo komponento kūrimas

ng generate component components/my-component

Naujos paslaugos kūrimas

ng generate service services/my-service

Maršruto pridėjimas

Redaguokite 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 }
];

Tailwind CSS naudojimas

Tailwind yra iš anksto sukonfigūruotas. Naudokite klases tiesiogiai savo šablonuose:

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

Naudingos komandos

npm start Paleisti kūrimo serverį (prievadas 4200)
npm run build Sukompiliuoti produkcijai
npm test Vykdyti vienetų testus
ng generate component Sukurti naują komponentą
ng generate service Sukurti naują paslaugą
ng generate --help Išvardyti visus prieinamus generatorius

Trikčių šalinimas

npm install nepavyksta su leidimo klaidomis

Priežastis: Leidimų problemos su npm talpykla arba node_modules.

Sprendimas: Ištrinkite node_modules aplanką ir package-lock.json, tada vėl paleiskite npm install.

Prievadas 4200 jau naudojamas

Priežastis: Kitas procesas naudoja prievadą 4200.

Sprendimas: Naudokite kitą prievadą: ng serve --port 4201 arba sustabdykite kitą procesą.

Modulio nerastos klaidos

Priežastis: Priklausomybės neįdiegtos arba sugadintos.

Sprendimas: Paleiskite npm install, kad įdiegtumėte visas priklausomybes.

Pakeitimai neatsispindi naršyklėje

Priežastis: Naršyklės talpykla arba neveikia automatinis perkrovimas.

Sprendimas: Atlikite priverstinį atnaujinimą (Ctrl+Shift+R arba Cmd+Shift+R) arba paleiskite kūrimo serverį iš naujo.

Kompiliavimas nepavyksta po diegimo

Priežastis: Kompiliavimo klaidos arba trūkstamos priklausomybės.

Sprendimas: Pirmiausia vietoje paleiskite npm run build, kad patikrintumėte klaidas prieš įkeldami.

Diegimo eiga

Kiekvieną kartą, kai įkeliate kodą į Git, jūsų aplikacija automatiškai sukompiliuojama ir įdiegiama:

Kodo pakeitimas git push npm run build Diegti į nginx Gyvai!

Jūsų įdiegtos aplikacijos URL atitinka šį formatą: 

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

Pavyzdys: https://student01-module-a.demo.nstrim.app

Daugiau informacijos rasite oficialioje Angular dokumentacijoje.