CI/CD for Angular with GitHub Actions

Lint, headless-test, and build your Angular app, then ship the dist bundle.

Angular ships with a CLI that standardizes lint, test, and build commands, which makes its pipeline predictable. The one gotcha is tests: Karma needs a headless Chrome configuration to run in CI. This recipe handles that and deploys the production bundle.

What the pipeline does

install deps with npm ci
lint with ng lint
test headless with ng test
build with ng build --configuration production
deploy the dist output

The workflow

The --browsers=ChromeHeadless and --watch=false flags make Karma run once and exit. Angular outputs to dist/<project-name>/browser in recent versions.

.github/workflows/ci.yml

name: CI
on:
  push:
    branches: [main]
  pull_request:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint --if-present
      - run: npx ng test --watch=false --browsers=ChromeHeadless
      - run: npx ng build --configuration production
      - uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist

Caching and speed

Beyond cache: npm, Angular keeps a build cache in .angular/cache; cache it with actions/cache keyed on the lockfile to speed repeat builds. AOT compilation makes Angular production builds CPU-heavy, so cheaper managed runners such as Latchkey shorten the build step and cut CI spend.

Deploying

Upload dist/<project>/browser to S3+CloudFront, GitHub Pages (use --base-href to match the subpath), Netlify, or Firebase Hosting. Add a deploy job gated on github.ref == refs/heads/main that downloads the artifact and pushes it to your host.

Key takeaways

Run Karma with --watch=false --browsers=ChromeHeadless in CI.
Cache .angular/cache for faster repeat builds.
Production output lives in dist/<project>/browser.