Angular

Komplet udrulningsguide til Angular på NStrim

Oversigt

Angular er et TypeScript-baseret webapplikationsframework udviklet af Google. Det leverer en omfattende løsning til at bygge dynamiske single-page-applikationer med en komponentbaseret arkitektur.

Før du begynder
Sørg for at have dit dashboard åbent - du skal bruge de Git-loginoplysninger, der vises der. Denne skabelon inkluderer Tailwind CSS til styling.

Kom godt i gang

1

Opret repository fra skabelon

Gå til fanen Tools & Deployment på dit dashboard. Klik på "New Repository", vælg Angular-skabelonen i dropdown-menuen, indtast et repository-navn og et subdomæne, og klik på "Create Repository".

2

Klon dit repository

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

Installer afhængigheder

npm install
4

Start udviklingsserver

npm start

Åbn http://localhost:4200 i din browser.

5

Build & push

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Hver push til Git udruller automatisk din applikation. Tjek din Module Work URL på dashboardet for at se din live-side.

Lokal udvikling med Docker

Hvis du ikke har Node.js installeret lokalt, kan du bruge Docker til at køre Angular-kommandoer. Projektet indeholder en Dockerfile til produktions-builds.

Hvad er Docker?
Docker opretter isolerede "containere" med al den software, du har brug for (Node.js, npm), uden at installere dem på din computer. Tænk på det som en letvægts virtuel maskine.

Forudsætninger

Installer Docker Desktop til dit operativsystem (Windows, Mac eller Linux).

Kør kommandoer med Docker

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

# Run development server (accessible at localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:lts-alpine npm start

# Build for production
docker run --rm -v $(pwd):/app -w /app node:lts-alpine npm run build
Bemærk
Docker er valgfrit til lokal udvikling. NStrim-platformen håndterer udrulning automatisk - du behøver kun Docker, hvis du vil køre kommandoer lokalt uden Node.js installeret.

Projektstruktur

Forstå hvor filerne er placeret:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Rod-komponent
│   │   ├── app.component.html    # Rod-skabelon
│   │   ├── app.component.css     # Komponent-styles
│   │   ├── app.config.ts         # App-konfiguration
│   │   └── app.routes.ts         # Routing-konfiguration
│   ├── index.html                # Hoved-HTML-fil
│   ├── main.ts                   # Applikationens entry point
│   └── styles.css                # Globale styles (Tailwind)
├── public/                       # Statiske assets
├── angular.json                  # Angular CLI-konfiguration
├── package.json                  # Afhængigheder og scripts
├── tailwind.config.js            # Tailwind CSS-konfiguration
├── tsconfig.json                 # TypeScript-konfiguration
└── Dockerfile                    # Docker build-konfiguration

Almindelige opgaver

Opret en ny komponent

ng generate component components/my-component

Opret en ny service

ng generate service services/my-service

Tilføj 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 }
];

Brug af Tailwind CSS

Tailwind er forudkonfigureret. Brug klasserne direkte i dine skabeloner:

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

Nyttige kommandoer

npm start Start udviklingsserver (port 4200)
npm run build Build til produktion
npm test Kør unit-tests
ng generate component Opret en ny komponent
ng generate service Opret en ny service
ng generate --help Vis alle tilgængelige generators

Fejlfinding

npm install fejler med tilladelsesfejl

Årsag: Tilladelsesproblemer med npm-cache eller node_modules.

Løsning: Slet node_modules-mappen og package-lock.json, og kør derefter npm install igen.

Port 4200 er allerede i brug

Årsag: En anden proces bruger port 4200.

Løsning: Brug en anden port: ng serve --port 4201 eller stop den anden proces.

Module not found-fejl

Årsag: Afhængigheder ikke installeret eller beskadigede.

Løsning: Kør npm install for at installere alle afhængigheder.

Ændringer vises ikke i browseren

Årsag: Browser-cache eller live reload virker ikke.

Løsning: Hard refresh (Ctrl+Shift+R eller Cmd+Shift+R) eller genstart udviklingsserveren.

Build fejler efter udrulning

Årsag: Build-fejl eller manglende afhængigheder.

Løsning: Kør npm run build lokalt først for at tjekke for fejl, før du pusher.

Udrulnings-workflow

Hver gang du pusher kode til Git, bygges og udrulles din applikation automatisk:

Kodeændring git push npm run build Udrul til nginx Live!

Din udrullede applikations-URL har dette format: 

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

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

For mere information, besøg den officielle Angular-dokumentation.