Novidades no Angular V15 🔥

API Standalone está em produção agora!

As APIs que permitiam que os desenvolvedores criassem aplicativos sem o uso dos NgModules que antes estava em fase de “teste” por assim dizer na versão 14 do Angular, agora foi oficialmente lançada e estabilizada. A equipe responsável por isso vai atualizar e evoluir a ferramenta conforme foi estabelecido por eles.

A preocupação era integrar ele completamente no Angular, sendo assim é possível trabalhar com os standalones junto com as APIs de HttpClient, Angular Elements, router e outras.

Permite inicializar um aplicativo a partir de um único componente (segue exemplo do Angular):

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';
 
@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    … <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}
bootstrapApplication(PhotoAppComponent);

Acompanhe o Blog e o meu Curso de Angular

Router e HttpClient tree-shakable

Com as APIs standalones do router podemos criar aplicativos multi-rotas, vamos ver o exemplo do Angular para declarar a rota raiz:

export const appRoutes: Routes = [{
  path: 'lazy',
  loadChildren: () => import('./lazy/lazy.routes')
    .then(routes => routes.lazyRoutes)
}];

As lazyRoutes são declaradas aqui:

import {Routes} from '@angular/router';
 
import {LazyComponent} from './lazy.component';
 
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

Agora vamos registrar o appRoutes quando chamamos o bootstrapApplication:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes)
  ]
});

Uma excelente notícia é o fato de o ProvideRouter ser tree-shakable, sendo assim podendo ser reduzido em 11% o tamanho do router no bundle, tudo isso em tempo de compilação. A redução acontece após ele remover recursos que não estão sendo utilizados.

API de composição de diretivas

Aqui temos um recurso que foi atendido graças às solicitações no GitHub, ele traz a possibilidade de adicionar diretivas a um elemento host.

Ao existir a possibilidade de adicionar diretivas aos elementos host, nos permite reutilizar códigos, sendo possível graças a API de composição de diretiva.

Vamos ver um exemplo do Angular:

@Component({
  selector: 'mat-menu',
  hostDirectives: [HasColor, {
    directive: CdkMenu,
    inputs: ['cdkMenuDisabled: disabled'],
    outputs: ['cdkMenuClosed: closed']
  }]
})
class MatMenu {}

No exemplo acima, adicionamos as diretivas de HasColor e CdkMenu ao nosso componente, sendo assim o nosso MatMenu utiliza todos os inputs, outputs e logicas do HasColor, porém só utiliza os inputs e outputs do CdkMenu.

Diretiva de Imagem estável

Esse recurso foi considerado estável agora, ele foi desenvolvido junto com o Chrome Aurora na v14.2.

Foi verificada uma melhoria de 75% na LCP em um teste na lighthouse.

Também foram adicionados outros recursos para diretivas de imagem:

• Geração automática de srcset: Esse recurso permite gerar imagem de tamanho apropriado quando solicitado e assim diminuindo o tempo de download das imagens.
• Modo de preenchimento (em teste): Esse recurso permite que a imagem preencha o contêiner pai automaticamente, eliminando a necessidade de colocar width e height.

Podemos usar o NgOptimizedImage direto no componente ou no NgModule:

import { NgOptimizedImage } from '@angular/common';
 
// Include it into the necessary NgModule
@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}
 
// ... or a standalone Component
@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}
class MatMenu {}

Para utilizar em componente, basta substituir o atributo src da imagem pelo ngSrc e não esqueça de especificar o atributo prioritário para as imagens LCP.

Router Guards

Vamos ver um exemplo onde definimos um guard que faz a verificação se o usuário está logado:

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
  constructor(private loginService: LoginService) {}
 
  canActivate() {
    return this.loginService.isLoggedIn();
  }
}
 
const route = {
  path: 'somePath',
  canActivate: [MyGuardWithDependency]
};

Na parte de LoginService é onde se encontra a maior parte da lógica e no guard apenas chamamos o isLoggedIn().

Agora com as novas funcionalidades, podemos refratora o código desta forma:

const route = {
  path: 'admin',
  canActivate: [() => inject(LoginService).isLoggedIn()]
};

Default Import no Router

Durante o lazy loud do router, ele automaticamente desempacota os exports e assim reduzimos o boilerplate.

Segue o exemplo do Angular:

@Component({
  standalone: true,
  template: '...'
})
export default class LazyComponent { ... }

Antes dessa atualização, tínhamos que fazer o seguinte para ter o carregamento do lazy:

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file').then(m => m.LazyComponent),
}

Com a v15 ele automaticamente procura um export default e caso exista, ele usa:

{
  path: 'lazy',
  loadComponent: () => import('./lazy-file'),
}

Melhorando a stack trace

Junto com a pesquisa da comunidade, o Angular sempre tira dicas do que melhorar com os desenvolvedores, sendo assim o escolhido da vez foi as mensagens de erro:

A parceria com o Chrome DevTools, ajudou o time do Angular a melhorar as mensagens de erro:

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:26378:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33

Esse snippet tem dois problemas:

• Tem só uma linha que corresponde ao código do desenvolvedor o resto é de dependências de terceiros;
• Não existe uma mensagem falando qual das interações do usuário que causou o erro.

A atualização do time do Chrome DevTools criou uma maneira de ignorar os erros provenientes de terceiros, também foi criado uma API de marcação que permite concatenar as tarefas assíncronas e independentes em uma única stack trace. Essas mudanças ajudaram absurdamente o que os desenvolvedores veem:

ERROR Error: Uncaught (in promise): Error
Error
    at app.component.ts:18:11
    at fetch (async)  
    at (anonymous) (app.component.ts:4)
    at request (app.component.ts:4)
    at (anonymous) (app.component.ts:17)
    at submit (app.component.ts:15)
    at AppComponent_click_3_listener (app.component.html:4)

Agora podemos acompanhar todos os passos até o erro.

Componentes MDC

Foi refatorado os componentes do material, assim alinhando com as especificações do Material Design e permitindo utilizar o Material 3 e assim finalizando os tokens de estilo.

Alguns códigos foram até refeitos do zero e outros reescritos, atualizaram a estrutura do DOM e outros. A maioria das APIs do TypeScript e seletores de componentes foram mantidas iguais às antigas.

Angular migrou milhares de projetos do Google e assim facilitou a documentação de alterações de todos os componentes.

Alguns projetos antigos e principalmente aqueles que utilizam os componentes precisaram ser ajustados via CSS.

Podemos ainda utilizar o impor via legado, porém está obsoleto o uso dos antigos, veja o exemplo do Angular:

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

Mudaram muitos dos componentes visando a utilização de tokens de design e variáveis de CSS internos, deixando mais tranquilo o uso do Material 3.

Melhoria nos componentes

Com base em mais uma pesquisa com o público, foi resolvido o quarto problema mais votado, o suporte a seleção de intervalo no controle de slider.

Para usar:

<mat-slider>
  <input matSliderStartThumb>
  <input matSliderEndThumb>
</mat-slider>

Agora todos os componentes tem uma API para personalizar a densidade, podemos agora especificar o padrão da densidade:

@use '@angular/material' as mat;
 
$theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$red-palette),
    accent: mat.define-palette(mat.$blue-palette),
  ),
  typography: mat.define-typography-config(),
  density: -2,
));
 
@include mat.all-component-themes($theme);

CDK Listbox

Foi implementado o listbox no Component Dev Kit (CDK):

O módulo do @angular/cdk/listbox permite criar interações e personalizações e obtemos todos os comportamentos do listbox.

Melhorias no esbuild experimental

Já tivemos uma prévia no v14 no suporte de esbuild no ng build para diminuir o tempo de compilação.

Agora na v15 temos a introdução experimental do Sass, template SVG, substituição de arquivo e o suporte ao ng build –watch, temos que atualizar nosso angular.json:

"builder": "@angular-devkit/build-angular:browser"

Para a versão experimental:

"builder": "@angular-devkit/build-angular:browser-esbuild"

Caso ocorra bugs, podemos reportar a eles e ajudar na melhoria do Angular.

Importação automática 

Foi melhorado o sistema de importação dos componentes que estamos usando no template.

Melhorias no CLI

Agora podemos gerar um novo componente independente via ng g component –standalone.

Foi reduzido os passos para criação de um ng new, foi removido o test.ts, pollyfills.ts e environments. Podemos adicionar manualmente os polyfills no angular.json:

"polyfills": [
  "zone.js"
]

Agora podemos especificar o uso do ECMAScript no .browserlist.

Contribuição da comunidade

Foram destacados dois recursos e o primeiro deles é a capacidade configurações das opções default do DatePipe.

Assim podemos alterar globalmente a formatação do DatePipe, exemplo do Angular:

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DATE_PIPE_DEFAULT_OPTIONS,
      useValue: { dateFormat: 'shortDate' }
    }
  ]
});

Neste exemplo é habilitado o formato shortDate em todos os locais onde foram usados o DatePipe.

O segundo recurso destacado pelo Angular é a tag de preload para imagens durante o SSR, foi adicionado uma tag  <link rel=’preload’> para usar no Angular Universal.

Sem necessidade de alteração caso você já tenha ativado a diretiva de imagem.

Descontinuidade

Foram descontinuados

• providedIN: ‘any’;
• providedIn: NgModule.

Também foi deixado a evolução de lado do @angular/flex-layout, porém o suporte, correções de segurança ainda serão atualizados sem problemas.

Essas são as principais novidades do Angular v15.

Lembrando que essas informações foram retiradas do blog do Angular.