Angular standalone components

Vídeo desenvolvendo na prática:

A estrutura do Angular é baseada em componentes.
Os Componentes são partes de interface. Blocos compostos por um template, um estilo e uma classe.

Antes do Angular 14 era necessário um módulo, que é um mecanismo para agrupar components, directives, pipes e services relacionados.

Mas agora com as APIs do standalone components, pode ser totalmente independente, deixando NgModule opcional, o que torna a criação de aplicativos Angular mais simplificada.

Os módulos não foram descontinuados e ainda podem ser usados. Inclusive é possível usar componentes com módulos e sem na mesma aplicação.
Eu tenho criados novos componentes das aplicações com essa API, mas ainda não migrei as anteriores.

Etapas executas no vídeo:

Criamos o projeto

ng new angular-standalone

Criamos o componente verses passando a flag --standalone

ng generate component verses --standalone

Ao usar a flag, foi criado nosso componente sem o arquivo de módulos e com o sinalizador standalone: true e imports dentro do arquivo de componente.

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule],
  providers: [],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})

Também criamos o serviço chamado verses na mesma pasta para consumo da API

ng generate service verses/verses

@Injectable({
  providedIn: 'root'
})
export class VersesService {

  constructor(private httpClient: HttpClient) { }

  getVerse(): Observable<Verse> {
    return this.httpClient.get<Verse>('https://www.abibliadigital.com.br/api/verses/nvi/sl/23').pipe(take(1));
  }
}

Vamos adicionar o serviço e modulo HttpClientModule no nosso componente

@Component({
  selector: 'app-verses',
  standalone: true,
  imports: [CommonModule, HttpClientModule],
  providers: [VersesService],
  templateUrl: './verses.component.html',
  styleUrls: ['./verses.component.css']
})

Para carregar a rota desse componente em lazy loading, o que faz carregar apenas ao acessar a rota, usamos o loadComponent;

{
    path: '',
    title: 'Verses',
    loadComponent: () => import('./verses/verses.component')
    .then(c => c.VersesComponent)
  }

Se você está em uma versão do Angular anterior a 13, recomendo o upgrade devido a ganhos de performance que essa versão traz.
Na versão 14 foi introduzido principalmente o standalone components, e se tornou estável na versão 15.

GitHub Projeto