Al trabajar con Angular 21 y Angular CLI 21.1.4, puede surgir un problema al intentar configurar el sufijo .component manualmente en el archivo angular.json.
En versiones anteriores de Angular era posible definir:
"suffix": "component"Sin embargo, en Angular 17+ y especialmente en Angular 21, esta propiedad ya no está permitida y genera el error:
Property suffix is not allowed.Entorno utilizado
En este caso el entorno fue:
- Angular CLI: 21.1.4
- Angular: 21.1.4
- Node.js: 20.20.0
- npm: 10.8.2
- Sistema Operativo: Windows 64-bit
El problema
Al ejecutar:
ng g c admin/layout/admin-layout --skip-tests --style noneLos archivos generados eran:
admin-layout.ts admin-layout.html admin-layout.cssEn lugar de:
admin-layout.component.ts admin-layout.component.html admin-layout.component.cssEsto ocurre porque en Angular 21 ya no se usa suffix en el angular.json.
La solución correcta en Angular 21
Angular CLI ahora utiliza el parámetro --type para definir el sufijo del archivo.
Comando correcto:
ng g c admin/layout/admin-layout --type component --skip-tests --style noneEste comando generará correctamente:
admin-layout.component.ts admin-layout.component.htmlVerificación con dry-run
Para verificar antes de crear los archivos:
ng g c test-abc --type component --dry-runLa salida correcta debe mostrar:
CREATE src/app/test-abc/test-abc.component.ts CREATE src/app/test-abc/test-abc.component.htmlConfiguración permanente (opcional)
Si deseas que todos los componentes se generen automáticamente con .component, puedes configurar el tipo por defecto usando:
ng config projects.pokemon-ssr.schematics.@schematics/angular:component.type componentTambién puedes definir:
ng config projects.pokemon-ssr.schematics.@schematics/angular:component.skipTests true ng config projects.pokemon-ssr.schematics.@schematics/angular:component.style scss¿Por qué Angular eliminó “suffix”?
En Angular moderno (v17+), el sistema de schematics fue actualizado y el campo suffix fue eliminado del schema oficial.
El control ahora se maneja mediante el parámetro type.
Esto permite mayor consistencia en la generación de archivos y evita configuraciones obsoletas en el angular.json.
Conclusión
Si estás trabajando con Angular 21 y necesitas que tus componentes se generen correctamente con .component, no intentes usar:
"suffix": "component"En su lugar, utiliza:
--type componentEsto garantiza compatibilidad con Angular CLI 21 y evita errores en la configuración del proyecto.
