Angular 19.2 wprowadza szereg usprawnień, które mają na celu poprawę wydajności i wygody pracy z frameworkiem. W tej wersji pojawiły się nowe funkcje, takie jak lepsza obsługa zasobów, wsparcie dla literałów szablonowych czy kompatybilność z TypeScript 5.8. W tym artykule przyjrzymy się najistotniejszym zmianom i nowościom, które warto poznać.
Wsparcie TypeScript 5.8 (support TypeScript 5.8)
Angular 19.2 będzie w pełni kompatybilny z najnowszą wersją TypeScript 5.8, której stabilna wersja jest zaplanowana na 25 lutego 2025 roku, czyli niemal w tym samym czasie.
Wprowadzenie eksperymentalnej funkcji httpResource
Angular eksperymentuje z nową funkcją httpResource, która wprowadza bardziej deklaratywne i reaktywne zarządzanie żądaniami HTTP. W przeciwieństwie do tradycyjnego podejścia z HttpClient, gdzie każde zapytanie wymagało ręcznego wywołania, httpResource automatycznie aktualizuje dane w odpowiedzi na zmiany sygnałów. Spójrzmy na przykład.
Do tej pory, jeśli chcieliśmy pobrać dane z API w Angularze, używaliśmy serwisu HttpClient w taki sposób:
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) {}
getUser(id: number): Observable<User> {
return this.http.get<User>(`https://api.example.com/users/${id}`);
}
}
Nowa funkcja httpResource pozwala na utworzenie zasobu HTTP (HttpResource), który reaguje na zmiany sygnałów.
Czyli zamiast ręcznie wywoływać http.get(…) przy każdej zmianie ID użytkownika, możemy utworzyć httpResource, który sam będzie aktualizował dane, gdy zmieni się np. ID użytkownika.
const userResource = httpResource<User>({
method: 'GET',
url: () => `https://api.example.com/users/${userId()}`, // URL zmienia się dynamicznie
});
Takie podejście upraszcza kod, poprawia zarządzanie stanem i eliminuje potrzebę ręcznego odświeżania danych. Choć funkcja jest jeszcze eksperymentalna, zapowiada istotne ułatwienia w obsłudze asynchronicznych operacji w aplikacjach Angulara.
Obsługa literałów szablonowych (support untagged template literals in expressions)
W Angularze 19.2 wprowadzono usprawnienie dotyczące literałów szablonowych (template literals), które wcześniej nie były wspierane w szablonach HTML. To usprawnienie upraszcza sposób, w jaki możemy łączyć zmienne z tekstem w szablonach.
W starszych wersjach Angulara, jeśli chcieliśmy w szablonie umieścić tekst z wstawioną zmienną, mogliśmy, a czasem musieliśmy, używać tradycyjnego operatora łączenia stringów (+). Na przykład:
{{ ‘Ala ma ‘ + count + ‘ koty’ }}
{{ cartCount() === 0 ? 'Twój koszyk jest pusty.' : 'Masz ' + cartCount() + ' w koszyku.' }}
W takim przypadku zmienna count była łączona z tekstem za pomocą operatora +. To podejście było poprawne, ale wprowadzało pewną sztywność i wymagało od nas pisania długich, mniej eleganckich wyrażeń w szablonie.
Od wersji 19.2 Angular umożliwia używanie literałów szablonowych (template literals), czyli nowoczesnego sposobu interpolacji stringów, który jest bardziej czytelny i zwięzły. Możemy teraz używać składni:
{{ `Ala ma ${count} koty` }}
{{ cartCount() === 0 ? 'Twój koszyk jest pusty.' : `Masz ${cartCount()} w koszyku.` }}
Zamiast używać operatora +, wstawiamy zmienną bezpośrednio w ciąg tekstowy za pomocą ${}. To podejście jest bardziej eleganckie, czytelniejsze i łatwiejsze do utrzymania, zwłaszcza w przypadku dłuższych lub bardziej złożonych ciągów tekstowych.
Obsługa wielu responses w resources() (support streaming resources)
W nowej wersji Angulara dodano możliwość tworzenia zasobów (resources) obsługujących dane przesyłane strumieniowo (streaming). Zamiast tradycyjnego „loadera” (funkcji ładującej dane), zasób może teraz korzystać z opcji stream, która jest funkcją zwracającą Promise z typem Signal.
Dodatkowo, funkcja rxResource() została zaktualizowana, aby wykorzystywać tę nową funkcjonalność, umożliwiając obsługę wielu odpowiedzi z różnych źródeł, takich jak Observables
Domyślna wartość w resource() (support default value in resource())
Kiedy używamy funkcji resource(), zanim zasób zostanie w pełni załadowany, jego wartość znajduje się w nieznanym stanie. Domyślnie, w takich przypadkach, funkcja ta zwraca undefined. Oznacza to, że kiedy próbujemy uzyskać dostęp do wartości zasobu, typ .value() może zawierać również undefined, co powoduje konieczność specjalnej obsługi tych przypadków w kodzie. Tego typu sytuacje mogą komplikować zarządzanie stanem, ponieważ programiści muszą uwzględniać możliwość undefined w typach.
Z wprowadzeniem opcji defaultValue do resource() i rxResource(), możliwe jest określenie wartości domyślnej, która zostanie użyta, gdy zasób nie jest jeszcze załadowany. Dzięki temu, typ .value() nie będzie zawierał już undefined, dzięki czemu można ustalić jasną, domyślną wartość, która będzie używana w tych przypadkach.
stary sposób:
const resourceValue = resource().value(); // Może być undefinednowy sposób:
const resourceValue = resource({ defaultValue: 'default' }).value(); // Zwróci 'default'
Ostrzeżenia o brakujących importach dla niestandardowych dyrektyw strukturalnych (detect missing structural directive imports)
Do najnowszej wersji Angulara, jeśli zapomnieliśmy dodać import dla dyrektywy strukturalnej (np. ngIf, ngFor z CommonModule), kompilator generował ostrzeżenie. Jednak dla niestandardowych dyrektyw strukturalnych, które zostały zdefiniowane przez użytkownika, brak takiego importu nie generował żadnego ostrzeżenia – po prostu aplikacja nie działała, ale nie było żadnej informacji o błędzie. Dla osób migrujących do standalone components było to frustrujące, ponieważ trudno było wykryć brakujący import.
Od Angulara 19.2, kompilator będzie ostrzegał także w przypadku brakujących importów dla niestandardowych dyrektyw strukturalnych.
Wsparcie dla Set() i jego walidatorów w formularzach (support type set in form validators)
Walidatory takie jak Validators.required, Validators.minLength, i Validators.maxLength są zwykle używane do walidacji długości tablic lub łańcuchów znaków. Jednak, gdy próbujemy zastosować te walidatory do obiektów typu Set (które są strukturą danych przechowującą unikalne elementy), nie działały one poprawnie. Powodem tego było to, że Set posiada właściwość size, a nie length.
Po wprowadzeniu zmiany, walidatory Validators.required, Validators.minLength, i Validators.maxLength zaczęły poprawnie działać z obiektami typu Set. Teraz walidatory te uwzględniają właściwość size obiektów Set jako odpowiednik length.
const set = new Set([1, 2, 3]);
const control = new FormControl(set, [Validators.minLength(4)]); // Działa poprawnie
Podsumowanie
Angular 19.2 to kolejna ważna wersja popularnego frameworka, która wprowadza szereg usprawnień i nowych funkcji, mających na celu poprawę wydajności, ułatwienie codziennej pracy deweloperów oraz dostosowanie do najnowszych technologii.
W tej wersji Angulara skupiono się na udoskonaleniu obsługi zasobów, wysyłąniu requestów HTTP, walidatorów formularzy oraz interakcji z szablonami, a także wprowadzono pełną kompatybilność z TypeScript 5.8.
Dzięki tym zmianom tworzenie aplikacji webowych staje się jeszcze prostsze, bardziej efektywne i przyjemne.