Por qué utilizar componentes standalone
Descubra cómo los componentes standalone simplifican Angular.
Por qué utilizar componentes standalone es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Por qué usar componentes standalone?
Los componentes standalone le permiten crear aplicaciones Angular sin NgModules. Cada componente declara sus propias dependencias, lo que hace que los bloques de construcción sean autosuficientes y más fáciles de entender.
La era de NgModule
Tradicionalmente, cada componente, directiva y pipe debía declararse dentro de un @NgModule. Los módulos agrupaban las declaraciones y gestionaban los imports/exports.
Esto añadía código repetitivo y otra capa de indirección.
Problemas causados por NgModules
Los NgModules introdujeron dificultades habituales: olvidar declarar un componente, declararlo en dos módulos, confundir imports con declarations y crear módulos compartidos grandes que incluían demasiado.
La idea de standalone
Con los componentes standalone, cada componente enumera exactamente lo que necesita mediante su propia matriz imports. No hay ningún módulo central que tenga que conocerlo.
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}Dependencias autosuficientes
Como un componente standalone declara sus propias dependencias, puede leer un solo archivo y saber todo aquello de lo que depende. Esto mejora la claridad y las herramientas de desarrollo.
Menos código repetitivo
Ya no es necesario hacer coincidir declarations y exports entre módulos. Importe un componente directamente donde lo use, de forma similar a cómo funcionan los módulos ES.
Mejor tree-shaking
Los componentes standalone hacen explícito el grafo de dependencias, lo que ayuda a los bundlers a eliminar el código no utilizado y puede dar lugar a bundles más pequeños.
Lazy loading simplificado
Las rutas pueden cargar un componente standalone de forma diferida directamente mediante un import dinámico, sin necesidad de envolverlo en un feature module.
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)El nuevo valor predeterminado
En las versiones recientes de Angular, standalone es el valor predeterminado para los componentes nuevos. NgModules siguen funcionando, pero standalone es el camino recomendado.
Interoperabilidad con NgModules
El código standalone y el basado en módulos pueden interoperar. Un componente standalone puede importarse en un NgModule, y un componente basado en NgModule puede usar imports standalone, lo que facilita la migración.
Lo que aún debe configurar
La configuración de toda la aplicación (como el router o el cliente HTTP) se proporciona mediante los providers de bootstrapApplication en lugar de un módulo raíz, como verá más adelante.
Comprobación rápida: por qué standalone
¿Cuál es la principal ventaja de los componentes standalone?
Resumen: por qué standalone
Los componentes standalone eliminan el código repetitivo de NgModule al permitir que cada componente declare sus propias dependencias. Esto aporta un código más claro, un lazy loading más sencillo y un mejor tree-shaking. Standalone es ahora el valor predeterminado. A continuación: crear uno.
Preguntas frecuentes
¿La lección «Por qué utilizar componentes standalone» es gratis?
Sí — el texto completo de «Por qué utilizar componentes standalone» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Por qué utilizar componentes standalone»?
Descubra cómo los componentes standalone simplifican Angular. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Por qué utilizar componentes standalone»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué utilizar componentes standalone
- Creación de componentes standalone
- Importación directa de dependencias
- Arranque de una app standalone