Migración Angular 15 → 18

[patricia-martinez-imatia]

Plan: Migración Angular 15 → 18 + Standalone — ontimize-web-ngx

Objetivos

Migración incremental de ontimize-web-ngx (Angular 15.2.9 → 18) con adopción de standalone components.

Progreso General

✅ FASE 1: Angular 15 → 16 — COMPLETADA (migration/16.x.x)

• Node.js y TypeScript actualizados
• @angular/* dependencias → 16.x
• @angular/material + @angular/cdk → 16.x
• @ngbracket/ngx-layout (fork temporal de flex-layout)
• Third-party dependencies actualizadas
• npm run build ✅ sin errores
• npm test ✅ 237 specs pasan

✅ FASE 2: Angular 16 → 17 — COMPLETADA (migration/17.x.x)

• Angular 17.x, Material 17.x actualizado
• Control flow migration (*ngIf→@if, *ngFor→@for)
• Migración parcial Injector.get() → inject()
• Guards funcionales (AuthGuardService, CanActivateFormLayoutChildGuard)
• Preparar standalone (componentes hoja marcados como standalone: true)
• npm run build ✅ sin errores
• npm test ✅ 2277 specs pasan

🔄 FASE 3: Angular 17 → 18 — EN PROGRESO (migration/18.x.x)

• Angular 18.x, Material 18.x (M3), CDK 18.x
• TypeScript → 5.4+
• Standalone migration completa (todos los componentes)
• provideOntimizeWeb() implementado para standalone bootstrap
• Typed Forms (50+ UntypedFormGroup refs)
• Guards funcionales (completo)
• API pública final (standalone + NgModules wrapper deprecated)
• npm run build ✅ sin errores
• npm test ✅ 2277 SUCCESS, 31 skipped, 0 failures
  - [ ] Material 3 (M3) theming migration (OMITIR hasta Material v21)
• Eliminar flex-layout → CSS nativo (30+ templates)
• Reestructurar SCSS theming por versión de Angular
  • Remover herencia de estilos de botones legacy de Angular 8/15 en v18
  • ontimize-style.v8.scss (Angular 8 legacy)
  • ontimize-style.v15.scss (Angular 15 intermediate)
  • ontimize-style.scss → usa v15 como base (Angular 18) pero con nuevos mixin para configurar densidad de los componentes
  • Actualizar themes (ontimize-blue.scss, ontimize-black-yellow.scss)
  • Actualizar gulpfile.js para copiar versiones
  • Documentación SCSS_VERSION_STRUCTURE.md
• Crear nuevo theme oxigen.theme.scss (basado en Figma + Material Symbols Outlined)
• Smoke test visual exhaustivo en playground
• Migración de Karma → Jest (opcional, post-migración)
• Documentar MIGRATION_GUIDE.md para consumidores