Importando dependências diretamente
Adicione importações a um componente em vez de a um módulo.
Importando dependências diretamente é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Importando dependências diretamente
Um componente independente declara o que usa na própria matriz imports. Isso substitui a separação entre declarações e importações dos NgModules.
A matriz imports
Adicione outros componentes independentes, diretivas e pipes à matriz imports do 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 {}Importando outros componentes
Para renderizar um componente filho no template, importe a classe dele. Assim, o seletor dele ficará disponível para uso.
Importando diretivas
Diretivas independentes são importadas da mesma forma. Depois de importá-las, você pode aplicá-las no template.
import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
selector: 'app-note',
imports: [HighlightDirective],
template: '<p appHighlight>Note</p>'
})
export class NoteComponent {}Importando pipes
Pipes independentes também são incluídos em imports. Por exemplo, importar um pipe personalizado permite usá-lo em uma interpolação.
Diretivas comuns do Angular
Alguns recursos integrados vêm de pacotes. Por exemplo, RouterLink vem de @angular/router e precisa ser importado para ser usado.
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-nav',
imports: [RouterLink],
template: '<a routerLink="/home">Home</a>'
})
export class NavComponent {}FormsModule e similares
Você também pode importar NgModules existentes em um componente independente. Importar FormsModule habilita recursos de formulários orientados por template, como ngModel.
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
imports: [FormsModule],
template: '<input [(ngModel)]="name">'
})
export class FormComponent {
name = '';
}O fluxo de controle integrado não precisa de importação
Os blocos integrados de fluxo de controle (if, for, switch, defer) fazem parte da própria linguagem de templates, portanto não precisam de importação. Isso é diferente das diretivas estruturais mais antigas.
Importe somente o que usar
Mantenha as importações mínimas: liste apenas as dependências realmente referenciadas pelo template. Isso mantém os componentes enxutos e facilita a eliminação de código não utilizado.
Importando vários itens
A matriz imports pode listar vários itens juntos.
imports: [ChildComponent, HighlightDirective, RouterLink, FormsModule]Os erros de compilação orientam você
Se você usar um seletor ou pipe que não foi importado, o Angular informará claramente que ele não é conhecido nesse componente. Adicione-o a imports para corrigir o problema.
Verificação rápida: importações
Onde ficam as dependências de componentes independentes?
Recapitulação: importações diretas
Componentes independentes listam suas dependências na matriz imports do componente: outros componentes, diretivas, pipes e até NgModules, como FormsModule. O fluxo de controle integrado não precisa de importação. Mantenha as importações mínimas. A seguir: inicializando um aplicativo independente.
Perguntas Frequentes
A aula “Importando dependências diretamente” é grátis?
Sim — o texto completo de “Importando dependências diretamente” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Importando dependências diretamente”?
Adicione importações a um componente em vez de a um módulo. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Importando dependências diretamente”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Por que usar componentes independentes
- Criando componentes independentes
- Importando dependências diretamente
- Inicializando um aplicativo independente