239 lines
4.5 KiB
Markdown
239 lines
4.5 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
nx build org --configuration=development
|
|
```
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
nx build org --configuration=production
|
|
```
|
|
|
|
Built files will be in `dist/org/`
|
|
|
|
## Testing
|
|
|
|
### Run All Tests
|
|
|
|
```bash
|
|
nx test
|
|
```
|
|
|
|
### Run Specific Library Tests
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
# Lint all projects
|
|
nx lint
|
|
|
|
# Lint specific project
|
|
nx lint org
|
|
nx lint api
|
|
```
|
|
|
|
## Code Generation
|
|
|
|
### Generate Component
|
|
|
|
```bash
|
|
nx generate @nx/angular:component my-component --project=org
|
|
```
|
|
|
|
### Generate Service
|
|
|
|
```bash
|
|
nx generate @nx/angular:service my-service --project=org
|
|
```
|
|
|
|
### Generate Library
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
nx reset
|
|
```
|
|
|
|
### Reinstall Dependencies
|
|
|
|
```bash
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
```
|
|
|
|
### Port Already in Use
|
|
|
|
Change the port in `project.json` serve configuration or use:
|
|
|
|
```bash
|
|
nx serve org --port=4201
|
|
```
|
|
|
|
### Build Errors
|
|
|
|
Check TypeScript configuration and ensure all dependencies are installed:
|
|
|
|
```bash
|
|
npm install
|
|
nx build org
|
|
```
|