Cadê o app.module.ts?

A evolução do Angular no que se refere ao standalone components (componentes independentes) é uma das mudanças mais significativas da última década no framework, e ela reflete um esforço para tornar o desenvolvimento mais simples, flexível e alinhado com as necessidades de modernização do JavaScript/TypeScript.

1. Estado Inicial do Angular (Antes de 2022)

Nos primeiros anos, o Angular seguia o conceito de modularização por meio de módulos, ou seja, tudo era agrupado dentro de módulos Angular (NgModule). Para criar um componente, era necessário:

Criar o componente.
Declarar o componente em um módulo (NgModule).
Adicionar o componente à lista de declarations do módulo.

Esse modelo oferecia uma estrutura sólida e organizada, mas também trazia um pouco de sobrecarga, já que cada componente precisava estar associado a um módulo, o que não era sempre necessário do ponto de vista funcional.

2. Motivação para a Mudança (Até 2022)

O modelo tradicional baseado em módulos, embora eficaz, trazia algumas limitações:

Complexidade desnecessária: Muitas vezes, você precisava de um componente simples, mas ele tinha que ser agrupado em um módulo só para funcionar.
Dificuldade de reutilização: A modularização forçada criava dependências entre componentes e módulos, dificultando a reutilização de um componente em outros contextos.
Tamanho do código: O Angular precisa de tempo para carregar os módulos e componentes, e com projetos grandes, a quantidade de módulos complicava a otimização de desempenho.

Esses pontos fizeram com que os desenvolvedores buscassem soluções mais simples e flexíveis.

3. Introdução ao Standalone Components (Angular 14 - 2022)

A partir do Angular 14 (lançado em 2022), o time do Angular introduziu o conceito de standalone components, que permite a criação de componentes independentes, sem a necessidade de declarálos em um módulo. Isso trouxe maior flexibilidade, simplicidade e um melhor desempenho para certos cenários.

O que são Standalone Components?

Standalone components são componentes que podem ser usados diretamente sem precisar estar dentro de um NgModule. Eles podem ser importados e usados diretamente em outros componentes ou em templates, o que reduz a complexidade e melhora a modularização.

Agora, ao criar um componente, você pode indicar explicitamente que ele é independente, usando o parâmetro standalone: true na sua definição:

import { Component } from '@angular/core';

@Component({
selector: 'app-example',
standalone: true,
template: `<h1>Hello, Standalone Component!</h1>`,
})
export class ExampleComponent {}

4. Principais Vantagens dos Standalone Components

Simplicidade: Não é necessário criar um NgModule para cada componente. Isso simplifica muito a estrutura de projetos menores ou mais modulares.
Reusabilidade: Você pode importar um componente diretamente em outros componentes sem precisar de módulos intermediários.
Performance: A carga de componentes standalone pode ser otimizada, já que não há a sobrecarga de módulos. Isso também facilita a divisão de código (lazy loading) de forma mais granular.
Facilidade em Testes: Como os componentes standalone não dependem de módulos, fica mais fácil de testá-los isoladamente, sem as complexas dependências de módulos.
Melhor integração com outras bibliotecas: Por ser um conceito mais flexível e simples, a ideia de componentes standalone facilita a integração com outras bibliotecas e frameworks dentro de um mesmo projeto Angular.

5. Exemplo de Uso

Um componente standalone pode ser importado diretamente em outros componentes:

import { Component } from '@angular/core';
import { ExampleComponent } from './example.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [ExampleComponent],  // Importando o componente standalone
template: `<app-example></app-example>`,
})
export class AppComponent {}

6. O Que Está por Vir?

O Angular tem se concentrado em tornar o framework mais leve, modular e de fácil integração com outras ferramentas e bibliotecas. Isso reflete em várias melhorias, como:

Otimização no carregamento de módulos (com lazy loading mais eficiente).
Adoção de técnicas modernas de performance (como Server-side rendering com Angular Universal).
Maior flexibilidade e controle sobre o comportamento da aplicação sem sobrecarregar os desenvolvedores com configurações ou requisitos pesados.

7. Conclusão

A evolução dos standalone components no Angular marca um movimento em direção a uma abordagem mais simples e flexível, permitindo que os desenvolvedores criem componentes que podem ser usados isoladamente sem a necessidade de um módulo.

Isso resolve várias limitações do sistema de módulos original e traz vantagens no que diz respeito à simplicidade, performance e reusabilidade de código. Essa mudança também reflete as melhores práticas do desenvolvimento moderno, onde frameworks e bibliotecas buscam proporcionar maior flexibilidade e menor acoplamento entre os seus componentes.

Se você tem um projeto no Angular e está começando a trabalhar com a versão 14 ou superior, vale a pena explorar o uso de standalone components, especialmente em projetos menores ou mais modulares!