# Angular 17 (next) - Primeiras Impressões 😍

O time do Angular lançou a versão 17 (next) nesta quarta-feira, 4 de outubro de 2023, permitindo que os usuários explorem as novas funcionalidades. Você pode conferir o changelog completo da versão 17 [**aqui**](https://github.com/angular/angular/blob/main/CHANGELOG.md#1700-next7-2023-10-04).

### Criando Novo Projeto

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696558763346/15c48ae6-0f8a-4c8d-b0ec-94e9b9f6d425.png align="center")

A criação de novos projetos permanece essencialmente a mesma, com a exceção de uma nova opção para ativar configurações de **SSR (Server-Side Rendering)**.

### Estrutura do Projeto

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696558922595/55855e03-dcf3-484e-b716-658d778ca808.png align="center")

O boilerplate inicial do projeto foi significativamente otimizado, com a equipe do Angular focando em tornar o projeto mais limpo. Como observado, os arquivos de **rotas** e **configurações** estão mais concisos, e não há mais arquivos de módulos. Todos os componentes agora são criados por padrão como **standalone components** (introduzidos no Angular 16), o que é lindo 😍, pois todos os módulos agora são importados dentro do componente pai.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696559257075/f291fca6-8414-47b9-859d-dd4065ba2161.png align="center")

### Nova Sintaxe

Embora a documentação oficial do Angular ainda não tenha incorporado as opções de controle de fluxo, é confirmado que teremos diretrizes como `@if`, `@else`, `@for`, `@empty`, e `@switch`. Neste momento, vamos abordar as quatro primeiras.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696560563549/ad3e3f04-9bbf-4aea-b0e8-666e29326b26.png align="center")

Em nosso arquivo TypeScript, temos dois métodos: um para alternar o título da página e outro para adicionar uma nova habilidade à nossa matriz de habilidades.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696560688853/50d8d0fc-e3dd-4f13-b105-0dc7d3a075bb.png align="center")

Observe dois blocos de código com as classes "novo" e "antigo". Ambos executam a mesma tarefa, mas o código tornou-se mais fácil de compreender. A destacar, temos a diretiva `@empty` no bloco de repetições, que é realmente incrível 😍.

### Tempo de Compilação

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696561510111/9929ea7a-4a19-41e7-b56d-22c207b94115.png align="center")

Como você pode ver na imagem acima, o projeto inicial agora gera apenas três arquivos para o bundle, eliminando arquivos como vendor.js e runtime.js. O tempo de compilação de **1.2 segundos** é significativamente mais rápido do que os **2.6 segundos** da versão 15, por exemplo (rodando em um MacBook com M2).

### Conclusão

Estou impressionado com o desempenho e as melhorias de sintaxe desta nova versão. Agora, aguardamos a versão 17 definitiva, juntamente com atualizações na documentação, para entendermos melhor o quanto ela realmente melhorou.