Guía Completa de Angular para Empresas Bolivianas: Por Qué las Corporaciones Eligen Este Framework

mi-erp-empresa/
├── src/
│   ├── app/
│   │   ├── core/                    # Servicios singleton, guards, interceptors
│   │   │   ├── services/
│   │   │   │   ├── auth.service.ts
│   │   │   │   ├── api.service.ts
│   │   │   │   └── error-handler.service.ts
│   │   │   ├── guards/
│   │   │   │   ├── auth.guard.ts
│   │   │   │   └── role.guard.ts
│   │   │   ├── interceptors/
│   │   │   │   ├── token.interceptor.ts
│   │   │   │   └── error.interceptor.ts
│   │   │   └── core.module.ts
│   │   │
│   │   ├── shared/                  # Componentes, pipes, directivas reutilizables
│   │   │   ├── components/
│   │   │   │   ├── data-table/
│   │   │   │   ├── modal/
│   │   │   │   └── notification/
│   │   │   ├── pipes/
│   │   │   ├── directives/
│   │   │   └── shared.module.ts
│   │   │
│   │   ├── features/                # Módulos de negocio (lazy loaded)
│   │   │   ├── ventas/
│   │   │   │   ├── components/
│   │   │   │   ├── services/
│   │   │   │   ├── models/
│   │   │   │   ├── ventas.module.ts
│   │   │   │   └── ventas-routing.module.ts
│   │   │   ├── inventario/
│   │   │   ├── contabilidad/
│   │   │   ├── rrhh/
│   │   │   └── reportes/
│   │   │
│   │   ├── layout/                  # Shell de la aplicación
│   │   │   ├── header/
│   │   │   ├── sidebar/
│   │   │   └── footer/
│   │   │
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── app-routing.module.ts
│   │
│   ├── assets/
│   ├── environments/
│   │   ├── environment.ts           # Desarrollo
│   │   ├── environment.staging.ts   # Testing
│   │   └── environment.prod.ts      # Producción
│   └── styles/
│
├── angular.json
├── tsconfig.json
└── package.json

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'ventas',
    loadChildren: () => import('./features/ventas/ventas.module')
      .then(m => m.VentasModule),
    canActivate: [AuthGuard, RoleGuard],
    data: { roles: ['VENDEDOR', 'GERENTE'] }
  },
  {
    path: 'contabilidad',
    loadChildren: () => import('./features/contabilidad/contabilidad.module')
      .then(m => m.ContabilidadModule),
    canActivate: [AuthGuard, RoleGuard],
    data: { roles: ['CONTADOR', 'GERENTE'] }
  }
];

// Con Angular Signals (Angular 17+)
@Injectable({ providedIn: 'root' })
export class VentasStore {
  // Estado
  private _ventas = signal<Venta[]>([]);
  private _loading = signal<boolean>(false);
  private _error = signal<string | null>(null);
 
  // Selectores (computed)
  readonly ventas = this._ventas.asReadonly();
  readonly loading = this._loading.asReadonly();
  readonly ventasDelMes = computed(() =>
    this._ventas().filter(v => this.esDelMesActual(v.fecha))
  );
  readonly totalVentas = computed(() =>
    this._ventas().reduce((sum, v) => sum + v.total, 0)
  );
 
  // Acciones
  async cargarVentas(): Promise<void> {
    this._loading.set(true);
    this._error.set(null);
 
    try {
      const ventas = await this.api.getVentas();
      this._ventas.set(ventas);
    } catch (e) {
      this._error.set('Error al cargar ventas');
    } finally {
      this._loading.set(false);
    }
  }
 
  agregarVenta(venta: Venta): void {
    this._ventas.update(current => [...current, venta]);
  }
}

@Component({
  selector: 'app-factura-form',
  template: `
    <form [formGroup]="facturaForm" (ngSubmit)="onSubmit()">
      <h3>Datos del Cliente</h3>
      <input formControlName="nitCliente" placeholder="NIT">
      <input formControlName="razonSocial" placeholder="Razón Social">
 
      <h3>Detalle de Productos</h3>
      <div formArrayName="items">
        @for (item of items.controls; track $index) {
          <div [formGroupName]="$index" class="item-row">
            <select formControlName="productoId">
              @for (p of productos(); track p.id) {
                <option [value]="p.id">{{ p.nombre }}</option>
              }
            </select>
            <input type="number" formControlName="cantidad">
            <input type="number" formControlName="precioUnitario" readonly>
            <span>{{ calcularSubtotal($index) | currency:'BOB' }}</span>
            <button type="button" (click)="eliminarItem($index)">X</button>
          </div>
        }
      </div>
      <button type="button" (click)="agregarItem()">+ Agregar Producto</button>
 
      <div class="totales">
        <p>Subtotal: {{ subtotal() | currency:'BOB' }}</p>
        <p>IVA (13%): {{ iva() | currency:'BOB' }}</p>
        <p><strong>Total: {{ total() | currency:'BOB' }}</strong></p>
      </div>
 
      <button type="submit" [disabled]="facturaForm.invalid || guardando()">
        {{ guardando() ? 'Guardando...' : 'Emitir Factura' }}
      </button>
    </form>
  `
})
export class FacturaFormComponent {
  private fb = inject(FormBuilder);
 
  facturaForm = this.fb.group({
    nitCliente: ['', [Validators.required, Validators.pattern(/^\d+$/)]],
    razonSocial: ['', Validators.required],
    items: this.fb.array([], Validators.minLength(1))
  });
 
  get items(): FormArray {
    return this.facturaForm.get('items') as FormArray;
  }
 
  subtotal = computed(() =>
    this.items.controls.reduce((sum, item) =>
      sum + (item.value.cantidad * item.value.precioUnitario), 0
    )
  );
 
  iva = computed(() => this.subtotal() * 0.13);
  total = computed(() => this.subtotal() + this.iva());
 
  agregarItem(): void {
    this.items.push(this.fb.group({
      productoId: ['', Validators.required],
      cantidad: [1, [Validators.required, Validators.min(1)]],
      precioUnitario: [0]
    }));
  }
}

// Agregar token de autenticación a todos los requests
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getToken();
 
  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
  }
 
  return next(req);
};
 
// Manejo centralizado de errores
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const notification = inject(NotificationService);
  const router = inject(Router);
 
  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        router.navigate(['/login']);
        notification.error('Sesión expirada');
      } else if (error.status === 403) {
        notification.error('No tienes permisos para esta acción');
      } else if (error.status >= 500) {
        notification.error('Error del servidor. Contacta a soporte.');
      }
 
      return throwError(() => error);
    })
  );
};

{
  "framework": "Angular 17+",
  "ui_components": "Angular Material o PrimeNG",
  "state_management": "Angular Signals (proyectos nuevos) o NgRx (legacy)",
  "forms": "Reactive Forms",
  "http": "HttpClient + Interceptors",
  "charts": "ngx-charts o Chart.js"
}

{
  "framework": "NestJS (Node.js) o Spring Boot (Java)",
  "api": "REST o GraphQL",
  "database": "PostgreSQL (transaccional) + MongoDB (logs/analytics)",
  "cache": "Redis",
  "auth": "JWT + Refresh Tokens"
}

{
  "hosting": "Firebase Hosting o Cloudflare Pages (frontend)",
  "backend": "Railway, Render, o VPS propio",
  "ci_cd": "GitHub Actions",
  "monitoring": "Sentry (errores) + Google Analytics (uso)"
}