1) Injetar serviços em Angular 14 sem um construtor usando inject.
Anteriormente, uma classe com um construtor sempre era necessária para injetar qualquer serviço:

class MyClass {
  constructor(private myService: MyService) {}
}

Agora, podemos injetar um serviço em funções e classes. Só precisamos declarar uma variável e defini-la igual para injetar com o nome do serviço dentro:

const meuServiço = inject(MeuServiço);
Isto é útil, por exemplo, em interceptores e guardas, que agora são comumente feitos com funções em vez de classes.

2) Tag de fechamento automático para salvar linhas em Angular 15.
A partir desta versão, você pode usar um componente com uma única tag:

Antes era necessário abrir e fechar uma tag de componente para utilizá-lo:

3) Reduza suas importações em Angular criando atalhos.
Em vez de ter importações longas como estas:

importar {MeuComponente} de '../../components/meu-componente';
Você pode reduzir as importações assim:

importar {MeuComponente} de '@componentes/meu-componente';
Para conseguir isso, vá para o arquivo tsconfig.json e adicione caminhos na propriedade compilerOptions. Dentro dos caminhos, você pode configurar seus próprios atalhos de importação:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

A recomendação é que se você estiver dentro de um componente e quiser usar algo específico para esse componente, importe-o relativamente usando ./ para acessar esse recurso. Mas ao acessar uma pasta pai, use o atalho @. Se houver problemas, talvez seja necessário fechar e reabrir o Visual Studio Code. Esses pequenos detalhes fazem a diferença para manter o código o mais organizado possível.

4) Otimize o carregamento de imagens com a diretiva NgOptimizedImage em Angular 15.
Se tivermos uma lista com 15 imagens e iterarmos por elas normalmente usando [src], enfrentaremos o problema de carregar todas as 15 imagens de uma vez quando a aplicação for iniciada, o que reduz o desempenho:

Para corrigir isso, Angular fornece a diretiva NgOptimizedImage. Para usá-lo, basta importá-lo:

importar { NgOptimizedImage } de '@angular/common';
E use [ngSrc] em vez de [src]. Isso carregará as imagens lentamente, melhorando o desempenho. No entanto, a directiva tem muitas outras configurações. Se você deseja apenas carregamento lento, recomendo usar o atributo loading="lazy", que faz parte do padrão HTML e é compatível com todos os navegadores:

Uma recomendação: se você tiver uma imagem principal no topo do menu, não configure-a para carregamento lento, pois ela será a primeira a carregar quando o aplicativo abrir. Aplique isso apenas às imagens que podem aparecer abaixo da rolagem, pois não precisamos que elas carreguem imediatamente.

Isso é muito importante para aplicativos públicos, como aplicativos SSR que precisam de um bom SEO, pois ajuda a melhorar o desempenho.

— Notas baseadas no curso Angular da EfisioDev —