Angular

Komplett distribusjonsveiledning for Angular på NStrim

Oversikt

Angular er et TypeScript-basert rammeverk for webapplikasjoner utviklet av Google. Det gir en omfattende løsning for å bygge dynamiske enkeltside-applikasjoner med en komponentbasert arkitektur.

Før du begynner
Sørg for at dashbordet ditt er åpent - du trenger Git-påloggingsinformasjonen som vises der. Denne malen inkluderer Tailwind CSS for stil.

Hurtigstart

1

Opprett repository fra mal

Gå til fanen Tools & Deployment i dashbordet. Klikk på "New Repository", velg Angular-malen fra nedtrekksmenyen, skriv inn et repository-navn og et subdomene, og klikk deretter på "Create Repository".

2

Klon repository

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

Installer avhengigheter

npm install
4

Start utviklingsserveren

npm start

Åpne http://localhost:4200 i nettleseren din.

5

Bygg og push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Hver push til Git distribuerer applikasjonen din automatisk. Sjekk Module Work URL i dashbordet for å se den kjørende siden din.

Lokal utvikling med Docker

Hvis du ikke har Node.js installert lokalt, kan du bruke Docker til å kjøre Angular-kommandoer. Prosjektet inneholder en Dockerfile for produksjonsbygg.

Hva er Docker?
Docker oppretter isolerte "containere" med all programvaren du trenger (Node.js, npm) uten å installere den på datamaskinen din. Tenk på det som en lettvekts virtuell maskin.

Forutsetninger

Installer Docker Desktop for ditt operativsystem (Windows, Mac eller Linux).

Kjøre kommandoer med Docker

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

# Start utviklingsserveren (tilgjengelig på localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Bygg for produksjon
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Merk
Docker er valgfritt for lokal utvikling. NStrim-plattformen håndterer distribusjon automatisk - du trenger kun Docker hvis du vil kjøre kommandoer lokalt uten at Node.js er installert.

Prosjektstruktur

Forstå hvor filene er plassert:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Rotkomponent
│   │   ├── app.component.html    # Rot-mal
│   │   ├── app.component.css     # Komponentstiler
│   │   ├── app.config.ts         # App-konfigurasjon
│   │   └── app.routes.ts         # Rutekonfigurasjon
│   ├── index.html                # Hoved-HTML-fil
│   ├── main.ts                   # Inngangspunkt for applikasjonen
│   └── styles.css                # Globale stiler (Tailwind)
├── public/                       # Statiske ressurser
├── angular.json                  # Angular CLI-konfigurasjon
├── package.json                  # Avhengigheter og skript
├── tailwind.config.js            # Tailwind CSS-konfigurasjon
├── tsconfig.json                 # TypeScript-konfigurasjon
└── Dockerfile                    # Docker build-konfigurasjon

Vanlige oppgaver

Opprett ny komponent

ng generate component components/my-component

Opprett ny tjeneste

ng generate service services/my-service

Legg til en rute

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

Bruke Tailwind CSS

Tailwind er forhåndskonfigurert. Bruk klasser direkte i malene dine:

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

Nyttige kommandoer

npm start Start utviklingsserveren (port 4200)
npm run build Bygg for produksjon
npm test Kjør enhetstester
ng generate component Opprett ny komponent
ng generate service Opprett ny tjeneste
ng generate --help List opp alle tilgjengelige generatorer

Feilsøking

npm install feiler med tilgangsfeil

Årsak: Tilgangsproblemer med npm-cache eller node_modules.

Løsning: Slett node_modules-mappen og package-lock.json, og kjør deretter npm install på nytt.

Port 4200 er allerede i bruk

Årsak: En annen prosess bruker port 4200.

Løsning: Bruk en annen port: ng serve --port 4201 eller avslutt den andre prosessen.

Modul ikke funnet-feil

Årsak: Avhengigheter er ikke installert eller er korrupte.

Løsning: Kjør npm install for å installere alle avhengigheter.

Endringer vises ikke i nettleseren

Årsak: Nettleser-cache eller live-reload fungerer ikke.

Løsning: Tving en oppdatering (Ctrl+Shift+R eller Cmd+Shift+R) eller start utviklingsserveren på nytt.

Bygging feiler etter distribusjon

Årsak: Byggefeil eller manglende avhengigheter.

Løsning: Kjør npm run build lokalt først for å sjekke for feil før du pusher.

Distribusjons-arbeidsflyt

Hver gang du pusher kode til Git, bygges og distribueres applikasjonen din automatisk:

Kodeendring git push npm run build Distribuer til nginx Live!

Den distribuerte applikasjons-URL-en din følger dette formatet: 

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

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

For mer informasjon, besøk den offisielle Angular-dokumentasjonen.