Esse é um dos meus assuntos prediletos! Vou mostrar para vocês como uso essa maravilha e compara como era em versões antigas usando módulos.

O standalone vem para ficar, disponível desde a versão 15 (detalhes aqui), o standalone é uma mão na roda e deixa tudo mais limpo e fácil de usar.

Quando adentrei no framework, brigava em projetos por ter tanto módulo e componentes amarrados de uma forma que me deixava maluco de tanto arquivo, mas com o standalone, tudo ficou mais claro, agora chega de papo e bora ver como é utilizado e como isso é o futuro…

O que é standalone?

É uma funcionalidade do Angular que permite criar componentes que não precisam ser declarados em um módulo, como era de costume nas versões mais antigas. Essa abordagem simplifica o desenvolvimento, pois o componente pode ser usado diretamente.

A partir do Angular 17, a equipe do Angular passou a utilizar os componentes “standalone” como padrão.

Para marcar um componente, diretiva ou pipe como standalone, basta usar a flag standalone: true. O Angular compiler irá reportar um erro se tentar declarar uma classe marcada como standalone em um NgModule.

O grande objetivo é trazer facilidade e organização para as aplicações, vamos ver isso na prática??

Componente “antigo” utilizando módulo:

Neste componente temos o user.module.ts onde importamos tudo que iremos usar no componente users, sendo uma diretiva, um pipe e afins.

Componente com standalone V17

Em um componente atual utilizando standalone não temos a estrutura com um .module.ts, utilizamos diretamente no componente a flag como true e o que vamos usar no componente importamos em imports: [] no caso importei outro componente chamado sidebar para mostrá-lo no meu painel de usuário.

import { Component, EventEmitter, inject, Output } from '@angular/core';
import { SidebarUserComponent } from '@components/sidebar-user/sidebar-user.component';

@Component({
selector: 'app-user-panel',
standalone: true,
imports: [SidebarUserComponent],
templateUrl: './user-panel.component.html',
styleUrl: './user-panel.component.scss'
})
export class UserPanelComponent {...}

Componente com standalone V19

Agora vamos ver o que tem de mais atual. O standalone virá como padrão no Angular 19, ou seja, não vai ser preciso ter explicitamente a flag standalone: true e caso você precise que não fique disponível e queira usar NgModules no componente, basta adicionar a flag standalone: false tranquilo, não?

Me siga também no Linkedin e Medium para continuar a receber conteúdos sobre Angular e Frontend! 😀