Angular Arquetipo

Esquema base para proyectos Angular con arquitectura modular y componentes core predefinidos.

📦 Cómo instalar

Instalación global

npm install -g @arely.sgtw/angular-arquetipo

Crear nuevo proyecto

ng new mi-proyecto [email protected]/angular-arquetipo

Instalación local para desarrollo

git clone <repository-url>
cd angular-arquetipo
npm install
npm run build

🚀 Cómo extender (agregar feature module)

Estructura de módulos

Cada feature module debe seguir esta estructura:

src/app/modules/[feature-name]/
├── pages/
│   └── [page-name]/
│       ├── [page-name].component.ts
│       ├── [page-name].component.html
│       ├── [page-name].component.scss
│       └── [page-name].component.spec.ts
├── [feature-name]-module.ts
└── [feature-name]-routing-module.ts

Ejemplo: Agregar módulo "productos"

1. Crear estructura de carpetas:

mkdir src/app/modules/productos
mkdir src/app/modules/productos/pages
mkdir src/app/modules/productos/pages/lista-productos

2. Crear componente de página:

// productos/pages/lista-productos/lista-productos.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-lista-productos',
  templateUrl: './lista-productos.component.html',
  styleUrls: ['./lista-productos.component.scss']
})
export class ListaProductosComponent {}

3. Crear módulo:

// productos/productos-module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductosRoutingModule } from './productos-routing-module';
import { ListaProductosComponent } from './pages/lista-productos/lista-productos.component';

@NgModule({
  declarations: [ListaProductosComponent],
  imports: [CommonModule, ProductosRoutingModule]
})
export class ProductosModule {}

4. Configurar rutas:

// productos/productos-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ListaProductosComponent } from './pages/lista-productos/lista-productos.component';

const routes: Routes = [
  { path: '', component: ListaProductosComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductosRoutingModule {}

5. Registrar en app-routing:

// app-routing-module.ts
const routes: Routes = [
  { path: 'productos', loadChildren: () => import('./modules/productos/productos-module').then(m => m.ProductosModule) }
];

📋 Convenciones de código

Nomenclatura

• Archivos: kebab-case (mi-componente.component.ts)
• Clases: PascalCase (MiComponente)
• Variables/métodos: camelCase (miVariable)
• Constantes: UPPER_SNAKE_CASE (MI_CONSTANTE)

Estructura de archivos

• Componentes: [nombre].component.ts|html|scss|spec.ts
• Módulos: [nombre]-module.ts
• Routing: [nombre]-routing-module.ts
• Servicios: [nombre].service.ts

Organización de carpetas

src/app/
├── core/                 # Componentes compartidos
│   └── components/
├── modules/             # Feature modules
│   ├── [feature]/
│   │   ├── pages/
│   │   ├── components/  # Componentes específicos del módulo
│   │   └── services/    # Servicios específicos del módulo
└── shared/              # Utilidades compartidas

Reglas de código

• Un componente por archivo
• Máximo 400 líneas por archivo
• Usar TypeScript strict mode
• Implementar OnDestroy para subscripciones
• Usar trackBy en *ngFor para listas grandes

🏗️ Diagrama de arquitectura

┌─────────────────────────────────────────────────────────────┐
│                        APP MODULE                           │
├─────────────────────────────────────────────────────────────┤
│                     APP ROUTING                             │
├─────────────────────────────────────────────────────────────┤
│  CORE COMPONENTS                                            │
│  ├── Header Component                                       │
│  └── Footer Component                                       │
├─────────────────────────────────────────────────────────────┤
│  FEATURE MODULES (Lazy Loading)                             │
│  ├── Home Module                                            │
│  │   └── Home Page Component                                │
│  ├── Login Module                                           │
│  │   └── Login Page Component                               │
│  └── [Custom Modules]                                       │
│      ├── Pages/                                             │
│      ├── Components/                                        │
│      └── Services/                                          │
└─────────────────────────────────────────────────────────────┘

Flujo de datos

1. App Module carga componentes core
2. Routing maneja navegación con lazy loading
3. Feature Modules se cargan bajo demanda
4. Componentes comunican via servicios o @Input/@Output

🧪 Testing

npm run test

🔧 Desarrollo

npm run build
npm publish