Angular

Komplett distributionsguide för Angular på NStrim

Översikt

Angular är ett TypeScript-baserat ramverk för webbapplikationer utvecklat av Google. Det erbjuder en heltäckande lösning för att bygga dynamiska single-page-applikationer med en komponentbaserad arkitektur.

Innan du börjar
Se till att din dashboard är öppen – du kommer att behöva Git-uppgifterna som visas där. Den här mallen innehåller Tailwind CSS för styling.

Kom igång

1

Skapa repository från mall

Gå till fliken Tools & Deployment i din dashboard. Klicka på knappen "New Repository", välj Angular-mallen från rullgardinsmenyn, ange ett repository-namn och en subdomän och klicka sedan på "Create Repository".

2

Klona ditt repository

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

Installera beroenden

npm install
4

Starta utvecklingsservern

npm start

Öppna http://localhost:4200 i din webbläsare.

5

Bygg och pusha

npm run build
git add .
git commit -m "Initial setup"
git push origin main
Varje push till Git distribuerar din applikation automatiskt. Kontrollera din Module Work URL i dashboarden för att se din live-sajt.

Lokal utveckling med Docker

Om du inte har Node.js installerat lokalt kan du använda Docker för att köra Angular-kommandon. Projektet innehåller en Dockerfile för produktionsbyggen.

Vad är Docker?
Docker skapar isolerade "containrar" med all programvara du behöver (Node.js, npm) utan att installera dem på din dator. Tänk på det som en lättviktig virtuell maskin.

Förutsättningar

Installera Docker Desktop för ditt operativsystem (Windows, Mac eller Linux).

Köra kommandon 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
Obs
Docker är valfritt för lokal utveckling. NStrim-plattformen hanterar distribution automatiskt – du behöver bara Docker om du vill köra kommandon lokalt utan att ha Node.js installerat.

Projektstruktur

Förstå var filerna finns:

├── src/
│   ├── app/
│   │   ├── app.component.ts      # Rotkomponent
│   │   ├── app.component.html    # Rotmall
│   │   ├── app.component.css     # Komponentstilar
│   │   ├── app.config.ts         # App-konfiguration
│   │   └── app.routes.ts         # Rutting-konfiguration
│   ├── index.html                # Huvud-HTML-fil
│   ├── main.ts                   # Applikationens ingångspunkt
│   └── styles.css                # Globala stilar (Tailwind)
├── public/                       # Statiska tillgångar
├── angular.json                  # Angular CLI-konfiguration
├── package.json                  # Beroenden och skript
├── tailwind.config.js            # Tailwind CSS-konfiguration
├── tsconfig.json                 # TypeScript-konfiguration
└── Dockerfile                    # Docker-byggkonfiguration

Vanliga uppgifter

Skapa en ny komponent

ng generate component components/my-component

Skapa en ny tjänst

ng generate service services/my-service

Lägga till en rutt

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

Använda Tailwind CSS

Tailwind är förkonfigurerat. Använd klasser direkt i dina mallar:

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

Användbara kommandon

npm start Starta utvecklingsserver (port 4200)
npm run build Bygg för produktion
npm test Kör enhetstester
ng generate component Skapa en ny komponent
ng generate service Skapa en ny tjänst
ng generate --help Lista alla tillgängliga generatorer

Felsökning

npm install fails with permission errors

Orsak: Behörighetsproblem med npm-cachen eller node_modules.

Lösning: Ta bort mappen node_modules och package-lock.json och kör sedan npm install igen.

Port 4200 already in use

Orsak: En annan process använder port 4200.

Lösning: Använd en annan port: ng serve --port 4201 eller stoppa den andra processen.

Module not found errors

Orsak: Beroenden är inte installerade eller är skadade.

Lösning: Kör npm install för att installera alla beroenden.

Changes not reflecting in browser

Orsak: Webbläsarcache eller live reload fungerar inte.

Lösning: Hård uppdatering (Ctrl+Shift+R eller Cmd+Shift+R) eller starta om utvecklingsservern.

Build fails after deployment

Orsak: Byggfel eller saknade beroenden.

Lösning: Kör npm run build lokalt först för att kontrollera fel innan du pushar.

Distributionsflöde

Varje gång du pushar kod till Git byggs och distribueras din applikation automatiskt:

Kodändring git push npm run build Distribuera till nginx Live!

Din distribuerade applikations-URL följer detta format: 

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

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

För mer information, besök den officiella Angular-dokumentationen.