Frontend Development

Development Setup

This guide covers the development workflow for the Sistema Venta frontend application, including running the dev server, testing, and building the application.

Installation

Install Dependencies

Navigate to the frontend directory and install all npm packages:

cd AppSistemaVenta
npm install

This will install all dependencies from package.json, including:

Angular 14.2.0 framework
Angular Material 14.2.7
Chart.js for visualizations
SweetAlert2 for notifications
XLSX for Excel exports
Moment.js for date handling

Configure API Endpoint

Update the backend API endpoint in your environment file:

src/environments/environment.ts

export const environment = {
  production: false,
  endpoint: "http://localhost:5000/api/"  // Update to your API URL
};

Ensure your backend API is running and accessible at the configured endpoint.

Verify Installation

Check that the Angular CLI is installed correctly:

ng version

You should see Angular CLI version 14.2.4 or compatible.

Development Server

Starting the Server

Run the development server with hot reload:

npm start

The application will be available at http://localhost:4200/ by default.

The dev server automatically recompiles and reloads when you make changes to source files.

Development Configuration

The development build uses these optimizations (configured in angular.json):

angular.json

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
}

Application Structure

Feature Modules

The application uses lazy loading for better performance:

// Main routes with lazy loading
const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { 
    path: 'pages', 
    loadChildren: () => import("./Components/layout/layout.module")
      .then(m => m.LayoutModule)  // Lazy loaded
  }
];

Component Organization

Pages
Services
Shared Module

Main application pages under /pages route:

Dashboard (/pages/dashboard) - Analytics and metrics
Usuarios (/pages/usuarios) - User management
Productos (/pages/productos) - Product catalog
Venta (/pages/venta) - New sales transaction
Historial Venta (/pages/historial_venta) - Sales history
Reportes (/pages/reportes) - Reports and analytics

API services for backend communication:

Services/
├── usuario.service.ts      // User & auth operations
├── producto.service.ts     // Product CRUD
├── venta.service.ts        // Sales transactions
├── categoria.service.ts    // Categories
├── rol.service.ts          // User roles
├── menu.service.ts         // Navigation menu
└── dash-board.service.ts   // Dashboard data

Reusable components and Material modules:

src/app/Reutilizable/shared/shared.module.ts

@NgModule({
  exports: [
    // Forms
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    
    // Material Components
    MatCardModule,
    MatInputModule,
    MatSelectModule,
    MatTableModule,
    MatPaginatorModule,
    MatDialogModule,
    MatSnackBarModule,
    MatDatepickerModule,
    // ... more Material modules
  ]
})

Working with Services

Creating a New Service

Generate a new service using Angular CLI:

ng generate service Services/example

Service Pattern

All services follow this pattern:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ResponseApi } from '../Interfaces/response-api';

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  private urlApi: string = environment.endpoint + "Example/";

  constructor(private http: HttpClient) { }

  // GET request
  lista(): Observable<ResponseApi> {
    return this.http.get<ResponseApi>(`${this.urlApi}Lista`);
  }

  // POST request
  guardar(request: any): Observable<ResponseApi> {
    return this.http.post<ResponseApi>(`${this.urlApi}Guardar`, request);
  }

  // PUT request
  editar(request: any): Observable<ResponseApi> {
    return this.http.put<ResponseApi>(`${this.urlApi}Editar`, request);
  }

  // DELETE request
  eliminar(id: number): Observable<ResponseApi> {
    return this.http.delete<ResponseApi>(`${this.urlApi}Eliminar/${id}`);
  }
}

Building the Application

Development Build

Build with source maps and no optimization:

ng build --configuration development

Watch Mode

Continuously build on file changes:

npm run watch
# or
ng build --watch --configuration development

Production Build

Optimized build for production:

npm run build
# or
ng build --configuration production

Production build features:

Minification and optimization
AOT (Ahead-of-Time) compilation
Tree shaking to remove unused code
Output hashing for cache busting
Environment file replacement

Production builds are output to dist/app-sistema-venta/

Build Configuration

Bundle Size Budgets

The application has bundle size limits configured:

angular.json

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]

If your build exceeds these limits, you’ll receive warnings or errors. Consider code splitting or lazy loading.

Testing

Running Unit Tests

Execute unit tests via Karma:

npm test
# or
ng test

Test Configuration

Tests are configured in karma.conf.js with:

Jasmine test framework
Chrome launcher
Code coverage reporting

Common Development Tasks

Generate a New Component

ng generate component Components/layout/Pages/new-page

Add the route in layout-routing.module.ts:

{ path: 'new-page', component: NewPageComponent }

Add a Material Component

Import the module in shared.module.ts:

import { MatBadgeModule } from '@angular/material/badge';

@NgModule({
  exports: [
    // ... existing exports
    MatBadgeModule
  ]
})

Create a Modal Dialog

ng generate component Components/layout/Modales/example-modal

Open the modal from a component:

import { MatDialog } from '@angular/material/dialog';
import { ExampleModalComponent } from '../Modales/example-modal/example-modal.component';

constructor(private dialog: MatDialog) { }

openModal() {
  this.dialog.open(ExampleModalComponent, {
    width: '600px',
    data: { /* your data */ }
  });
}

Show Notifications

Use SweetAlert2 for user notifications:

import Swal from 'sweetalert2';

// Success message
Swal.fire('Éxito', 'Operación completada', 'success');

// Error message
Swal.fire('Error', 'No se pudo completar', 'error');

// Confirmation dialog
Swal.fire({
  title: '¿Está seguro?',
  text: 'Esta acción no se puede deshacer',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Sí, eliminar'
}).then((result) => {
  if (result.isConfirmed) {
    // Perform action
  }
});

Debugging

Browser DevTools

The development build includes source maps for debugging:

Open Chrome DevTools (F12)
Navigate to Sources tab
Find your TypeScript files under webpack://
Set breakpoints and debug

Angular DevTools

Install the Angular DevTools browser extension for:

Component tree inspection
Change detection profiling
Dependency injection debugging

Common Issues

CORS Errors

If you encounter CORS errors when calling the API:

Ensure the backend API has CORS configured
Check the API endpoint in environment.ts
Consider using a proxy configuration (create proxy.conf.json)

Module Not Found Errors

If you see module import errors:

# Clear node_modules and reinstall
rm -rf node_modules
npm install

Port Already in Use

If port 4200 is already in use:

ng serve --port 4300

Get Started

Backend Setup

Frontend Setup

Core Features

Development Setup

Installation

Development Server

Starting the Server

Development Configuration

Application Structure

Feature Modules

Component Organization

Working with Services

Creating a New Service

Service Pattern

Building the Application

Development Build

Watch Mode

Production Build

Build Configuration

Bundle Size Budgets

Testing

Running Unit Tests

Test Configuration

Common Development Tasks

Debugging

Browser DevTools

Angular DevTools

Common Issues

Next Steps

Configuration

Deployment

Build docs developers (and LLMs) love

Get Started

Backend Setup

Frontend Setup

Core Features

​Development Setup

​Installation

​Development Server

​Starting the Server

​Development Configuration

​Application Structure

​Feature Modules

​Component Organization

​Working with Services

​Creating a New Service

​Service Pattern

​Building the Application

​Development Build

​Watch Mode

​Production Build

​Build Configuration

​Bundle Size Budgets

​Testing

​Running Unit Tests

​Test Configuration

​Common Development Tasks

​Debugging

​Browser DevTools

​Angular DevTools

​Common Issues

​Next Steps

Configuration

Deployment

Build docs developers (and LLMs) love

Development Setup

Installation

Development Server

Starting the Server

Development Configuration

Application Structure

Feature Modules

Component Organization

Working with Services

Creating a New Service

Service Pattern

Building the Application

Development Build

Watch Mode

Production Build

Build Configuration

Bundle Size Budgets

Testing

Running Unit Tests

Test Configuration

Common Development Tasks

Debugging

Browser DevTools

Angular DevTools

Common Issues

Next Steps