Módulo: nebula-shell
Tipo: Aplicación Angular Standalone
Responsabilidad: Orquestación inicial, configuración global y layout base
Última actualización: Abril 2026 | Versión: 1.0.0
El App Shell es el punto de entrada principal de Nebula ERP. Su propósito es:
apps/nebula-shell/
├── src/
│ ├── main.ts # Punto de entrada: bootstrapApplication
│ ├── app.config.ts # Configuración de proveedores globales
│ ├── app.component.ts # Lógica del componente raíz
│ ├── app.html # Template base con router-outlet
│ ├── app.scss # Estilos específicos del shell
│ ├── styles.scss # Estilos globales y temas
│ ├── index.html # HTML base de la aplicación
│ ├── environments/
│ │ ├── environment.ts # Configuración desarrollo
│ │ └── environment.prod.ts # Configuración producción
│ └── assets/ # Recursos estáticos
├── project.json # Configuración Nx
├── tsconfig*.json # Configuración TypeScript
└── vite.config.ts # Configuración de tests
Función de Angular que registra manejadores globales para capturar errores no controlados que ocurren en el navegador.
Configura el sistema de enrutamiento de Angular, definiendo qué componente mostrar para cada URL.
Configura el cliente HTTP de Angular con capacidad de interceptar peticiones antes de enviarlas y respuestas antes de procesarlas.
Función específica de Nebula UI Kit que registra el conjunto de iconos base del sistema de diseño.
Proveedor que registra iconos personalizados de la librería Lucide (conjunto moderno de iconos open source).
Token de inyección personalizado que almacena la URL base de la API backend.
Token que provee configuración específica para el sistema de autenticación.
@nebula/shared/data-access
provideHttpClient(
withInterceptors([
tokenInterceptor,
errorInterceptor
])
)
⚠️ Nota de Seguridad: La validación isConnected() verifica solo la presencia de user_data en localStorage. No valida la expiración del token. Para protección real, usar guards de ruta.
<div class="app-container">
<main class="main-content">
<router-outlet></router-outlet>
</main>
@if (showFooter) {
<section class="section-footer">
<lib-footer
[variant]="isLogin() ? 'default' : 'login'"
[status]="isLogin() ? 'Conexión establecida' : undefined"
></lib-footer>
</section>
}
</div>
:root {
--color-bg-content: #f0f0f0;
--color-title: #1c1c1c;
}
.dark-theme {
--color-bg-content: #1c1c1c;
--color-title: #f0f0f0;
}
bootstrapApplication(App, appConfig) inicializa Angular.showFooter e isLogin se actualizan.