Angular Academy · Lección

Importación directa de dependencias

Añada imports a un componente en lugar de a un módulo.

Importación directa de dependencias es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 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.

Importar dependencias directamente

Un componente standalone declara lo que usa en su propia matriz imports. Esto reemplaza la separación entre declarations e imports de NgModule.

La matriz imports

Añada otros componentes standalone, directivas y pipes a la matriz imports del decorador @Component.

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  imports: [ChildComponent],
  template: '<app-child></app-child>'
})
export class ParentComponent {}

Importar otros componentes

Para mostrar un componente hijo en su plantilla, importe su clase. Entonces podrá usar su selector.

Importar directivas

Las directivas standalone se importan de la misma manera. Una vez importadas, puede aplicarlas en la plantilla.

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'app-note',
  imports: [HighlightDirective],
  template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}

Importar pipes

Los pipes standalone también se incluyen en imports. Por ejemplo, importar un pipe personalizado le permite usarlo en una interpolación.

Directivas comunes de Angular

Algunas utilidades integradas proceden de paquetes. Por ejemplo, RouterLink procede de @angular/router y debe importarse para poder usarlo.

import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav',
  imports: [RouterLink],
  template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}

FormsModule y otros módulos

También puede importar NgModules existentes en un componente standalone. Importar FormsModule habilita funciones de formularios basados en plantillas, como ngModel.

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  imports: [FormsModule],
  template: '<input [(ngModel)]="name">'
})
export class FormComponent {
  name = '';
}

El control de flujo integrado no necesita imports

Los bloques de control de flujo integrados (if, for, switch, defer) forman parte del propio lenguaje de plantillas, por lo que no necesitan ningún import. Esto es diferente de las directivas estructurales antiguas.

Importar únicamente lo que usa

Mantenga los imports al mínimo: enumere solo las dependencias a las que la plantilla haga referencia realmente. Así los componentes serán más ligeros y podrán aplicar tree-shaking.

Importar varios elementos

La matriz imports puede incluir muchos elementos a la vez.

imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]

Los errores de compilación le orientan

Si usa un selector o pipe que no se ha importado, Angular muestra un error claro que indica que no se reconoce en ese componente. Añádalo a imports para corregirlo.

Comprobación rápida: imports

¿Dónde se incluyen las dependencias standalone?

Resumen: imports directos

Los componentes standalone enumeran sus dependencias en la matriz imports del componente: otros componentes, directivas, pipes e incluso NgModules como FormsModule. El control de flujo integrado no necesita ningún import. Mantenga los imports al mínimo. A continuación: iniciar una aplicación standalone.

Preguntas frecuentes

¿La lección «Importación directa de dependencias» es gratis?

Sí — el texto completo de «Importación directa de dependencias» 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 «Importación directa de dependencias»?

Añada imports a un componente en lugar de a un módulo. 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 3 de 4.

¿Cuánto tiempo toma la lección «Importación directa de dependencias»?

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

← Volver a Angular Academy