Por que usar componentes independentes
Veja como componentes independentes simplificam o Angular.
Por que usar componentes independentes é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.
Por que usar componentes independentes?
Componentes independentes permitem criar aplicativos Angular sem NgModules. Um componente declara as próprias dependências, tornando os blocos de construção autocontidos e mais fáceis de entender.
A era dos NgModules
Tradicionalmente, todo componente, diretiva e pipe precisava ser declarado dentro de um @NgModule. Os módulos agrupavam declarações e gerenciavam importações e exportações.
Isso acrescentava código repetitivo e uma camada extra de indireção.
Problemas causados pelos NgModules
Os NgModules introduziram dificuldades comuns: esquecer de declarar um componente, declará-lo em dois módulos, confundir importações com declarações e criar módulos compartilhados grandes que incluíam elementos demais.
A ideia dos componentes independentes
Com componentes independentes, cada componente lista exatamente o que precisa por meio da própria matriz imports. Não há um módulo central que precise conhecê-lo.
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}Dependências autocontidas
Como um componente independente declara as próprias dependências, você pode ler um único arquivo e saber tudo de que ele depende. Isso melhora a clareza e as ferramentas de desenvolvimento.
Menos código repetitivo
Você não precisa mais manter declarações e exportações correspondentes entre módulos. Importe um componente diretamente no local em que o utiliza, de modo semelhante ao funcionamento dos módulos ES.
Melhor eliminação de código não utilizado
Componentes independentes tornam o grafo de dependências explícito, o que ajuda os empacotadores a remover código não utilizado e pode resultar em pacotes menores.
Carregamento tardio simplificado
As rotas podem carregar um componente independente diretamente sob demanda com uma importação dinâmica, sem precisar de um módulo de funcionalidade como intermediário.
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)O novo padrão
Nas versões recentes do Angular, independente é o padrão para componentes recém-gerados. NgModules ainda funcionam, mas o uso de componentes independentes é o caminho recomendado.
Interoperabilidade com NgModules
Código independente e baseado em módulos pode funcionar em conjunto. Um componente independente pode ser importado em um NgModule, e um componente baseado em NgModule pode usar importações independentes, facilitando a migração.
O que você ainda configura
A configuração para todo o aplicativo, como o roteador ou o cliente HTTP, é fornecida por meio dos provedores de bootstrapApplication, em vez de um módulo raiz, como você verá mais adiante.
Verificação rápida: por que usar componentes independentes
Qual é o principal benefício dos componentes independentes?
Recapitulação: por que usar componentes independentes
Componentes independentes eliminam o código repetitivo dos NgModules ao permitir que cada componente declare as próprias dependências. Isso traz código mais claro, carregamento tardio mais simples e melhor eliminação de código não utilizado. O uso de componentes independentes agora é o padrão. A seguir: criando um componente.
Perguntas Frequentes
A aula “Por que usar componentes independentes” é grátis?
Sim — o texto completo de “Por que usar componentes independentes” é 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 “Por que usar componentes independentes”?
Veja como componentes independentes simplificam o Angular. 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 1 de 4.
Quanto tempo leva a aula “Por que usar componentes independentes”?
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