Zespół Angular ogłosił premierę wersji 20, skupiając się na stabilizacji istniejących funkcji, wsparciu dla GenAI, usprawnieniu debugowania oraz dalszym odchodzeniu od Zone.js. Wśród najważniejszych zmian znalazły się nowe eksperymentalne API, rozbudowane wsparcie dla renderowania po stronie serwera oraz aktualizacje stylu i diagnostyki, – informuje Angular Blog.

Stabilne Signals, nowe API i koniec dla *ngIf

Zespół Angular sfinalizował prace nad systemem reaktywności opartym na Signals, który od wersji 16 był dostępny w trybie preview. Obecnie funkcje signal, computed, input oraz view queries uzyskały status stabilny, a dołączyły do nich effect, linkedSignal i toSignal.

Wersja 20 wprowadza również eksperymentalne API oparte na Signals do zarządzania stanem asynchronicznym: resource oraz httpResource. Przykład wykorzystania resource do pobierania danych użytkownika:

const userId: Signal<string> = getUserId();
const userResource = resource({
  params: () => ({id: userId()}),
  loader: ({request, abortSignal}): Promise<User> => {
    return fetch(`users/${request.id}`, {signal: abortSignal});
  },
});

Równolegle wprowadzono nową wersję httpResource, pozwalającą na bezpośrednie wykorzystanie sygnałów w szablonach:

@Component({
  template: `{{ userResource.value() | json }}`
})
class UserProfile {
  userId = signal(1);
  userResource = httpResource<User>(() => 
    `https://example.com/v1/users/${this.userId()}`
  );
}

Zespół ogłosił także formalne rozpoczęcie procesu wycofywania dyrektyw strukturalnych *ngIf, *ngFor i *ngSwitch na rzecz nowej składni wprowadzonej w Angular 17. Przejście na nowy system wspiera komenda:

ng generate @angular/core:control-flow

Zoneless, SSR i ulepszenia DevTools

W Angular v20 tryb zoneless uzyskał status developer preview. Dzięki provideZonelessChangeDetection() i nowemu systemowi obsługi błędów w Node.js oraz przeglądarce możliwe jest działanie bez zależności od biblioteki Zone.js:

bootstrapApplication(AppComponent, {providers: [
  provideZonelessChangeDetection(),
  provideBrowserGlobalErrorListeners()
]});

Wydanie zawiera także stabilną wersję incremental hydration, umożliwiającą stopniowe pobieranie i aktywację komponentów:

@defer (hydrate on viewport) {
  <shopping-cart/>
}

Dodano także obsługę konfiguracji trybu renderowania na poziomie trasy (route-level rendering mode). Dla przykładu:

export const routeConfig: ServerRoute = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  {
    path: '/product/:id',
    mode: RenderMode.Prerender,
    async getPrerenderParams() {
      const dataService = inject(ProductService);
      const ids = await dataService.getIds();
      return ids.map(id => ({ id }));
    }
  }
];

Zespół Angular wspólnie z Firebase App Hosting przygotował narzędzia do łatwego wdrażania aplikacji SSR, SSG i CSR w chmurze Google Cloud.

Debugowanie, styl i wsparcie dla GenAI

W Angular v20 dodano wsparcie dla profilowania aplikacji bezpośrednio w Chrome DevTools dzięki integracji z Performance Panel. Po uruchomieniu ng.enableProfiling() możliwe jest śledzenie cykli renderowania, detekcji zmian i uruchamiania zdarzeń na wspólnej osi czasu z kodem JavaScript.

Zespół wprowadził również:

• aktualizacje stylu (brak domyślnych sufiksów klas i plików),
• pełne wsparcie typów i diagnostyki dla @HostBinding i @HostListener,
• nowe funkcje do dynamicznego tworzenia komponentów (createComponent, inputBinding, outputBinding),
• rozszerzenia składni szablonów: **, in, literały szablonowe.

Wprowadzono także eksperymentalne wsparcie dla testów w vitest:

npm i vitest jsdom --save-dev

Wspierając rozwój aplikacji AI, Angular udostępnia plik llms.txt oraz przewodniki na angular.dev/ai. Celem jest zapewnienie zgodności kodu generowanego przez LLM z najnowszą składnią Angulara.

Na zakończenie zespół ogłosił konkurs na oficjalną maskotkę Angulara — propozycje obejmują postać w kształcie logo, a także warianty inspirowane rybą głębinową (anglerfish). Udział w głosowaniu i zgłaszaniu nazw możliwy jest przez formularz RFC.