Angular Nx

Building

# Build for development
npx nx build sentinel

# Build for production
npx nx build sentinel --configuration=production
npm run build:prod  # Shorthand defined in package.json

Code Generation

# Generate component
npx nx generate @angular/core:component --name=my-component --project=sentinel --standalone=true

# Generate service
npx nx generate @angular/core:service --name=my-service --project=sentinel

# Generate library
npx nx generate @nx/angular:library --name=my-lib

# Generate interface
npx nx generate @angular/core:interface --name=my-interface --project=sentinel

Linting & Formatting

# Lint the project
npx nx lint sentinel

# Lint and fix
npx nx lint sentinel --fix

# Format with prettier
npx nx format:write

Dependency Graph

# View project dependency graph
npx nx graph

# Show affected projects
npx nx affected:graph

Nx Workspace Configuration

The workspace is configured with:

• Angular 19: Latest version with standalone components
• TypeScript: Strict mode enabled
• ESLint: For linting
• Jest: For unit testing
• Standalone components: No NgModules

Key Patterns for Sentinel

Component Generation

When generating components for Sentinel, always use:

• --standalone=true: All components are standalone
• --project=sentinel: Target the main application
• Consider the route structure under apps/sentinel/src/app/

For detailed component generation examples and templates, see component-generation.md.

Forms

When generating forms, use the new Signal Forms package (@angular/forms/signals).

Key points:

• Use form() from @angular/forms/signals instead of FormGroup/FormControl
• Initialize form state with signal()
• Use the Field component in templates

For detailed examples and patterns, see signal-forms.md.

Reference implementation: login.component.ts

Library Structure

• libs/sentinel/api-client: Auto-generated TypeScript API clients
• libs/sentinel/shared: Shared utilities and components
• Keep libraries focused and single-purpose

Testing

• Use Jest for unit tests
• Follow Angular testing best practices
• Mock API clients from libs/sentinel/api-client

Build Optimization

• Use production configuration for optimized builds
• Leverage Nx caching for faster builds
• Run nx affected commands in CI/CD

Integration with Other Services

API Client Generation

After updating the Rails backend API:

cd sentinel-backend
rails rswag:specs:swaggerize
cd ..
./tools/generate-api-clients.sh

This regenerates TypeScript clients in libs/sentinel/api-client/

Docker Integration

The frontend is containerized and served via nginx in production:

cd sentinel-frontend
docker build -t sentinel-frontend .

Troubleshooting

Clear Nx Cache

npx nx reset

Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Check Nx Version

npx nx --version

Best Practices

1. Use Nx Console: VS Code extension for visual Nx commands
2. Leverage caching: Nx caches build and test outputs
3. Run affected commands: Only build/test what changed
4. Keep workspace updated: Regularly update Nx and Angular
5. Follow Angular style guide: Use Angular CLI schematics through Nx

When to Use This Skill

Invoke this skill when:

• Generating Angular components, services, or other artifacts
• Running tests or builds in the frontend
• Working with the Nx monorepo structure
• Debugging Nx-related issues
• Optimizing build performance