NGRX-Playground/.agents/skills/angular-tooling/references/tooling-patterns.md

Angular Tooling Patterns

Table of Contents

• Custom Schematics
• Build Optimization
• Multi-Project Workspace
• CI/CD Configuration
• Path Aliases
• Proxy Configuration

Custom Schematics

Generate Schematic Collection

# Install schematics CLI
npm install -g @angular-devkit/schematics-cli

# Create schematic collection
schematics blank --name=my-schematics

Simple Component Schematic

// src/my-component/index.ts
import { Rule, SchematicContext, Tree, apply, url, template, move, mergeWith } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';

export function myComponent(options: { name: string; path: string }): Rule {
    return (tree: Tree, context: SchematicContext) => {
        const templateSource = apply(url('./files'), [
            template({
                ...options,
                ...strings,
            }),
            move(options.path),
        ]);

        return mergeWith(templateSource)(tree, context);
    };
}

Use Custom Schematics

# Link locally
npm link ./my-schematics

# Use
ng generate my-schematics:my-component --name=test --path=src/app

Build Optimization

Budget Configuration

{
    "budgets": [
        {
            "type": "initial",
            "maximumWarning": "500kB",
            "maximumError": "1MB"
        },
        {
            "type": "anyComponentStyle",
            "maximumWarning": "4kB",
            "maximumError": "8kB"
        },
        {
            "type": "anyScript",
            "maximumWarning": "100kB",
            "maximumError": "200kB"
        }
    ]
}

Differential Loading

Automatic in v20+ - builds for modern browsers by default.

// .browserslistrc
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 Edge versions

Code Splitting

// Lazy load routes for automatic code splitting
export const routes: Routes = [
    {
        path: 'admin',
        loadChildren: () => import('./admin/admin.routes').then((m) => m.adminRoutes),
    },
    {
        path: 'reports',
        loadComponent: () => import('./reports/reports.component').then((m) => m.Reports),
    },
];

Tree Shaking

Ensure proper imports for tree shaking:

// Good - tree shakeable
import { map, filter } from 'rxjs';

// Avoid - imports entire library
import * as rxjs from 'rxjs';

Preload Strategy

// app.config.ts
import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';

export const appConfig: ApplicationConfig = {
    providers: [provideRouter(routes, withPreloading(PreloadAllModules))],
};

Multi-Project Workspace

Create Workspace

# Create empty workspace
ng new my-workspace --create-application=false

cd my-workspace

# Add applications
ng generate application main-app
ng generate application admin-app

# Add library
ng generate library shared-ui
ng generate library data-access

Workspace Structure

my-workspace/
├── projects/
│   ├── main-app/
│   │   └── src/
│   ├── admin-app/
│   │   └── src/
│   ├── shared-ui/
│   │   └── src/
│   └── data-access/
│       └── src/
├── angular.json
└── package.json

Build Specific Project

ng build main-app
ng build shared-ui
ng serve admin-app

Library Configuration

// projects/shared-ui/ng-package.json
{
    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
    "dest": "../../dist/shared-ui",
    "lib": {
        "entryFile": "src/public-api.ts"
    }
}

Using Library in App

// After building library: ng build shared-ui
import { Button } from 'shared-ui';

@Component({
    imports: [Button],
    template: `<lib-button>Click</lib-button>`,
})
export class App {}

CI/CD Configuration

GitHub Actions

# .github/workflows/ci.yml
name: CI

on:
    push:
        branches: [main]
    pull_request:
        branches: [main]

jobs:
    build:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@v4

            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: '20'
                  cache: 'npm'

            - name: Install dependencies
              run: npm ci

            - name: Lint
              run: npm run lint

            - name: Test
              run: npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage

            - name: Build
              run: npm run build -- -c production

            - name: Upload coverage
              uses: codecov/codecov-action@v3
              with:
                  files: ./coverage/lcov.info

GitLab CI

# .gitlab-ci.yml
image: node:20

cache:
    paths:
        - node_modules/
        - .angular/cache/

stages:
    - install
    - test
    - build

install:
    stage: install
    script:
        - npm ci

test:
    stage: test
    script:
        - npm run lint
        - npm run test -- --watch=false --browsers=ChromeHeadless

build:
    stage: build
    script:
        - npm run build -- -c production
    artifacts:
        paths:
            - dist/

Path Aliases

Configure tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@app/*": ["src/app/*"],
            "@env/*": ["src/environments/*"],
            "@shared/*": ["src/app/shared/*"],
            "@features/*": ["src/app/features/*"],
            "@core/*": ["src/app/core/*"]
        }
    }
}

Usage

// Instead of relative imports
import { User } from '../../../core/services/user.service';

// Use path alias
import { User } from '@core/services/user.service';

Proxy Configuration

Development Proxy

// proxy.conf.json
{
    "/api": {
        "target": "http://localhost:3000",
        "secure": false,
        "changeOrigin": true
    },
    "/auth": {
        "target": "http://localhost:4000",
        "secure": false,
        "pathRewrite": {
            "^/auth": ""
        }
    }
}

Configure in angular.json

{
    "serve": {
        "options": {
            "proxyConfig": "proxy.conf.json"
        }
    }
}

Or via CLI

ng serve --proxy-config proxy.conf.json

Custom Builders

Using esbuild (Default in v20+)

{
    "architect": {
        "build": {
            "builder": "@angular-devkit/build-angular:application",
            "options": {
                "browser": "src/main.ts"
            }
        }
    }
}

SSR Configuration

# Add SSR
ng add @angular/ssr

{
    "architect": {
        "build": {
            "options": {
                "server": "src/main.server.ts",
                "prerender": true,
                "ssr": {
                    "entry": "server.ts"
                }
            }
        }
    }
}

Debugging

Source Maps

{
    "configurations": {
        "development": {
            "sourceMap": true
        },
        "production": {
            "sourceMap": {
                "scripts": true,
                "styles": false,
                "hidden": true,
                "vendor": false
            }
        }
    }
}

Verbose Logging

ng build --verbose
ng serve --verbose

Debug Tests

# Run tests with debugging
ng test --browsers=Chrome

# In Chrome DevTools, open Sources tab and set breakpoints

Package Scripts

{
    "scripts": {
        "start": "ng serve",
        "build": "ng build",
        "build:prod": "ng build -c production",
        "test": "ng test",
        "test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
        "lint": "ng lint",
        "lint:fix": "ng lint --fix",
        "analyze": "ng build -c production --stats-json && npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open",
        "update": "ng update"
    }
}