> Meticulous records real user sessions from a web app and replays them against each commit to catch visual regressions.
>
> Full AI-readable docs index (complete project setup journey + every page as markdown): https://app.meticulous.ai/llms.txt
# Angular - Complete Setup Guide
Complete guide for setting up Meticulous with Angular applications.
---
## Overview
Angular is a comprehensive framework for building web applications. This guide covers:
- **Recorder installation** in `src/index.html`
- **CI/CD configuration** with static asset upload
- **Authentication handling**
- **Common patterns** and troubleshooting
**Prerequisites**:
- Angular application (version 12+)
- Basic familiarity with [Meticulous concepts](/docs/onboarding-guide)
---
## Quick Start
### Step 1: Install Recorder in src/index.html
Add the Meticulous recorder script to your `src/index.html` **before any other scripts**.
**File**: `src/index.html`
```html
Your App Name
```
**Important**: The recorder must load before Angular bootstraps.
---
### Step 2: Configure GitHub Actions Workflow
Angular builds to static files, so we use the `upload-assets` action.
**File**: `.github/workflows/meticulous.yml`
```yaml
name: Meticulous Tests
on:
push:
branches: [main]
pull_request: {}
workflow_dispatch: {}
permissions:
actions: write
contents: read
issues: write
pull-requests: write
statuses: read
jobs:
test:
runs-on: ubuntu-latest
timeout-minutes: 30
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build app
run: npm run build
env:
NODE_ENV: production
- name: Upload and test
uses: alwaysmeticulous/report-diffs-action/upload-assets@v1
with:
api-token: ${{ secrets.METICULOUS_API_TOKEN }}
app-directory: "dist/your-app-name"
rewrites: |
[
{ "source": "/(.*)", "destination": "/index.html" }
]
```
**Important**: Replace `your-app-name` with your actual app name from `angular.json`.
---
### Step 3: Add API Token Secret
1. Get your API token from [Meticulous dashboard](https://app.meticulous.ai) → Project Settings
2. Go to GitHub repo → Settings → Secrets and variables → Actions
3. Create secret named `METICULOUS_API_TOKEN` with your token
---
## Finding Your App Name
The build output directory depends on your app name in `angular.json`:
**File**: `angular.json`
```json
{
"projects": {
"my-angular-app": {
"architect": {
"build": {
"options": {
"outputPath": "dist/my-angular-app"
}
}
}
}
}
}
```
Use `dist/my-angular-app` as the `app-directory` in your workflow.
---
## Common Patterns
### Pattern 1: Detect Test Mode
For a quick check, you can access `window.Meticulous` directly. For a cleaner, reusable approach, see [Pattern 4: Service for Test Detection](#pattern-4-service-for-test-detection) below.
**Component**:
```typescript
import { Component, OnInit } from '@angular/core'
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html'
})
export class DashboardComponent implements OnInit {
isTest = false
ngOnInit() {
this.isTest = (window as any).Meticulous?.isRunningAsTest || false
if (this.isTest) {
// Skip animations, use test data, etc.
}
}
}
```
**Template**:
```html