nx

Nx Workspace Guidelines

Project Structure

• Libraries: Place reusable code in libs/ directory

  • libs/ngx-lift/: Core Angular utilities library (RxJS operators, signals, pipes, validators)
  • libs/clr-lift/: Clarity Design System component library (depends on ngx-lift)

• Applications: Place applications in apps/ directory

  • apps/demo/: Demo application showcasing both libraries
  • apps/demo-e2e/: E2E tests for demo app

• Tools: Place build tools and scripts in tools/ directory

  • tools/vitest/: Vitest configuration utilities
  • tools/eslint-plugin/: Custom ESLint rules

Project Configuration

• project.json: Each project has a project.json with targets
• tsconfig.json: TypeScript configuration per project
• vite.config.mts: Vitest configuration for testing (libraries)
• ng-package.json: Angular packaging configuration (libraries)
• eslint.config.mjs: ESLint configuration per project

Nx Commands

• Build: npx nx build [project-name]
• Test: npx nx test [project-name] (not nx test)
• Lint: npx nx lint [project-name]
• Serve: npx nx serve [project-name]
• E2E: npx nx e2e [e2e-project-name]
• Graph: npx nx graph (visualize project dependencies)

Dependency Management

• Module Boundaries: Respect Nx project boundaries

  • Configured in eslint.config.mjs with @nx/enforce-module-boundaries
  • No circular dependencies allowed

• Tags: Use tags to organize projects

  • Define in project.json or nx.json
  • Enforce dependency rules based on tags

• Imports: Libraries are local packages in this monorepo

  // Import from ngx-lift library
  import {createAsyncState, poll} from 'ngx-lift';
  
  // Import from clr-lift library
  import {AlertComponent, ToastService} from 'clr-lift';
  
  // Path mappings defined in tsconfig.base.json
  

Code Generation

• Generators: Use Nx generators for consistent structure

  npx nx generate @nx/angular:library my-lib
  npx nx generate @nx/angular:component my-component --project=my-lib