🏗️ Schematics (ng generate) — Angular

⬅️ Volver al índice de comandos

🏗️ Schematics — generar código con ng

Los schematics son plantillas que trae el Angular CLI (schematics-angular) para generar código por ti: en vez de crear archivos a mano, le pides al CLI que arme la estructura (con sus buenas prácticas, imports y tests ya listos).

Qué quieres crear	Comando completo	Atajo
Proyecto nuevo	ng new [nombre-proyecto]	—
Componente	ng generate component [nombre]	ng g c [nombre]
Servicio	ng generate service [nombre]	ng g s [nombre]
Librería	ng generate library [nombre]	ng g lib [nombre]
Módulo	ng generate module [nombre]	ng g m [nombre]
Directiva	ng generate directive [nombre]	ng g d [nombre]
Pipe	ng generate pipe [nombre]	ng g p [nombre]
Guard (rutas)	ng generate guard [nombre]	ng g g [nombre]
Interface	ng generate interface [nombre]	ng g i [nombre]

💡 generate se abrevia g, y casi todo tiene su letra: componente = c, servicio = s, módulo = m, etc. Por eso ng g c home = "genera un componente llamado home".

💡 Para ver todo lo que el CLI puede generar: ng generate --help.

⚠️ Los comandos ng generate se ejecutan dentro de la carpeta del proyecto (donde está el angular.json), no sueltos en cualquier ruta.

🔎 ¿Qué hace ng g c además de crear el archivo?

Al generar un componente, el CLI crea una carpeta con su nombre y dentro 4 archivos (las 3 capas + el test). Ejemplo real:

ng g c mi-componente
CREATE src/app/mi-componente/mi-componente.ts        (214 bytes)  🧠 lógica (clase)
CREATE src/app/mi-componente/mi-componente.html      (28 bytes)   🦴 vista (template)
CREATE src/app/mi-componente/mi-componente.scss      (0 bytes)    🎨 estilos
CREATE src/app/mi-componente/mi-componente.spec.ts   (574 bytes)  🧪 test

• Crea su propia carpeta mi-componente/ dentro de src/app/ (todo ordenado junto).
• La extensión de estilos (.scss / .css) es la que elegiste al crear el proyecto.
• Por eso es mejor usar el CLI que crear los archivos a mano: evita olvidos y mantiene la convención de nombres del proyecto.

📝 Nomenclatura moderna: los archivos salen como mi-componente.ts (sin el .component). En proyectos antiguos eran mi-componente.component.ts, .component.html, etc. Mismo contenido, nombre más corto.

💡 Componentes standalone: en Angular moderno el componente generado ya es standalone (no hay que registrarlo en un módulo). Para usarlo, importas su clase en el imports: [...] del componente donde lo quieras meter, y pones su selector como etiqueta. → ver selector en ../02-Conceptos.md.