📎 Angular CI/CD – GitHub Actions, Nx, Linting, Previews, Deploys

Dein Code ist stark – aber ist dein Delivery-Prozess es auch?
Mit CI/CD für Angular erreichst du Qualität, Geschwindigkeit und Vertrauen bei jedem Commit.

🚀 1. Warum CI/CD?

• Automatisches Testen
• Sofortige Previews
• Kein „funktioniert nur auf meinem Rechner“

⚙️ 2. GitHub Actions Workflow Beispiel

name: Build & Test

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx nx affected --target=lint test build

➡ Kombinierbar mit nx affected für monorepo-intelligenz

✅ 3. Checks: Linting & Tests

nx run-many --target=lint,test --all

• ESLint (Prettier optional)
• Unit-Tests (Jest / Vitest)
• E2E (Playwright)

🔍 4. Preview Deployments

• z. B. mit Vercel, Netlify, Firebase
• Für jeden PR automatisch ein Preview-Link
• Staging ≠ Production, aber realistisch

🧪 5. Test Coverage & Gates

- run: npm run test -- --coverage

• Kombinierbar mit Codecov / SonarCloud
• „Fail the build if coverage < 80%“

🧾 6. Deployments

• Auto-deploy auf Merge (Staging)
• Manueller Trigger für Production
• Option: nx deploy per target definieren

📐 7. Bonus: Format, Cache, Matrix

• nx format:check
• nx reset vor build
• Build-Matrix für mehrere Node-Versionen

✅ Fazit

Ein gutes CI/CD Setup macht den Unterschied:

• 🧠 Automatisiert alles, was testbar ist
• 🚫 Verhindert Broken Builds
• ⚡ Bringt Vertrauen in jeden Commit

📍 Bald im Blog: 🧠 Angular Hiring Guide – Wie du echte Talente erkennst (und Blender entlarvst)