tehnicni-app/client

Client Application (Angular + Nx)

This is an Angular application built with Nx workspace, featuring multiple libraries and a modern development setup.

Prerequisites

• Node.js (version 18 or higher)
• npm package manager
• Angular CLI (optional, Nx provides similar functionality)

Quick Start

# Install dependencies
npm install

# Start development server
npm start

The application will be available at http://localhost:4200

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests

Nx Commands

# Serve the application
nx serve org

# Build the application
nx build org

# Run tests
nx test org

# Lint the code
nx lint org

# Show project dependencies
nx graph

Project Structure

src/
├── app/                    # Main application
├── index.html             # HTML template
├── main.ts               # Application bootstrap
└── styles.scss           # Global styles

libs/
├── shared/
│   ├── api/              # API services
│   ├── stores/           # State management
│   ├── i18n/            # Internationalization
│   └── toast/           # Toast notifications
└── web/
    ├── users/           # User management
    └── tasks/           # Task management

Libraries Overview

Shared Libraries

• api: HTTP services for backend communication
• stores: State management utilities
• i18n: Internationalization support
• toast: Toast notification service

Web Libraries

• users: User management components and services
• tasks: Task management functionality

Development Features

• Angular 20: Latest Angular features with signals
• Angular Material: UI component library with Azure Blue theme
• Standalone Components: Modern Angular architecture
• TypeScript: Strict type checking enabled
• SCSS: Styling with Sass preprocessing
• Jest: Testing framework
• ESLint: Code linting with Angular-specific rules

Building and Deployment

Development Build

nx build org --configuration=development

Production Build

nx build org --configuration=production

Built files will be in dist/org/

Testing

Run All Tests

nx test

Run Specific Library Tests

nx test api
nx test users
nx test tasks

Test Configuration

• Framework: Jest with Angular preset
• Setup: jest-preset-angular
• Coverage: Available with --coverage flag

Linting

# Lint all projects
nx lint

# Lint specific project
nx lint org
nx lint api

Code Generation

Generate Component

nx generate @nx/angular:component my-component --project=org

Generate Service

nx generate @nx/angular:service my-service --project=org

Generate Library

nx generate @nx/angular:library my-lib

Environment Configuration

Development and production environments are configured in:

• src/environments/environment.ts (development)
• src/environments/environment.prod.ts (production)

Styling

• Theme: Angular Material Azure Blue
• Global Styles: src/styles.scss
• Component Styles: Co-located with components
• Fonts: Roboto (Google Fonts)
• Icons: Material Icons

State Management

The application uses Angular signals for state management:

• Local State: Component signals
• Shared State: Injectable services with signals
• Derived State: Computed signals

API Integration

API services are located in libs/shared/api/:

• Users Service: User CRUD operations
• Tasks Service: Task management
• Comments Service: Comment functionality

Base API URL is configured to http://localhost:3000

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance

• Bundle Analysis: Use nx build org --analyze
• Lazy Loading: Feature modules are lazy loaded
• OnPush: Change detection strategy optimized
• Tree Shaking: Unused code eliminated in production

Troubleshooting

Clear Nx Cache

nx reset

Reinstall Dependencies

rm -rf node_modules package-lock.json
npm install

Port Already in Use

Change the port in project.json serve configuration or use:

nx serve org --port=4201

Build Errors

Check TypeScript configuration and ensure all dependencies are installed:

npm install
nx build org