Angular 12 został opublikowany. Zobacz co nowego przynosi!

Angular 12 przynosi zmiany w kompilatorze oraz parę ciekawych usprawnień funkcjonalnych oraz optymalizacyjnych. Poniżej przedstawię niektóre elementy nowej wersji.

Coraz bliżej „Ivy Everywhere”

Dwunasta wersja Angulara oznaczyła „View Engine” czyli aktualny kompilator jako przestarzały (deprecated). Oznacza to, że w kolejnej 13 wersji zostanie on usunięty i zastąpiony nowym kompilatorem Ivy. Twórcy informują, że wszystkie biblioteki współpracujące z „View Engine” będą na tą chwilę działać. Natomiast trzynasta wersja będzie wymagała migracji do Ivy.

Angular 12 usuwa stare identyfikatory i18n

Twórcy informują, że stare identyfikatory wiadomości zostaną zmigrowane do nowych automatycznie podczas migracji do nowej wersji. Stare identyfikatory miały problemy z białymi znakami, wyrażeniami ICU oraz szablonami formatowania. Nowy format ma nie powielać problemów z którymi borykał się poprzednik.

Nowe funkcjonalności w stylowaniu w Angular 12

Aktualizacja wprowadza nowe możliwości podczas stylowania komponentów. Jednym z nich jest obsługa inline Sass w polu styles dekoratora @Component. W poprzednich wersjach obsługa Sass była dostępna tylko poprzez importowanie zewnętrznych zasobów. Włączenie powyższej funkcji w istniejących już aplikacjach, odbywa się poprzez dodanie do pliku angular.json linii "inlineStyleLanguage": "scss”.

Jeżeli Twoja aplikacja korzysta z Angular CDK lub Angular Material należy przełączyć się na nowy pakiet npm sass. Twórcy informuję, że nie wspierają już starego pakietu node-sass.

Ponadto zarówno Angular CDK, jak i Angular Material udostępniają nowy interfejs API Sass zaprojektowany pod nową składnię @use. Twórcy Angular Material zaktualizowali dokumentację techniczną oraz zapewniają, że podczas aktualizacji do Angular 12 proces migracyjny ng update automatycznie dostosuje stary kod do nowej składni.

Nullish Coalescing Operator

Nullish Coalescing Operator już od jakiegoś czasu jest używany przez programistów piszących w języku TypeScript. W nowym Angularze można go używać bezpośrednio w szablonach. Zobaczcie jak w prosty sposób wykorzystując nowy operator możemy pisać skomplikowane warunki.

Przed:

{{ x !== null && x !== undefined ? x : y }}

Po:

{{ x ?? y }}

IE11 is deprecated!

Nadeszła ta wiekopomna chwila! IE11 został oficjalnie ogłoszony jako przestarzały i w kolejnej wersji Angulara wsparcie dla tej przeglądarki zostanie zaprzestane. Good bye my friend.

Mniejsze usprawnienia

Poniżej przedstawiam listę mniejszych usprawnień wprowadzonych w tej wersji:

• ng build jest teraz standardowo odpalany w trybie produkcyjnym. Zmiana ta ma pomóc w uniknięciu błędów podczas wypuszczania aplikacji na produkcję,
• strict mode to tryb, który pomaga wyłapać więcej błędów na wczesnym etapie produkcji oprogramowania. Od tej wersji tryb ten będzie standardowo włączony,
• Webpack 5 jest już oficjalnie wspierany przez Angulara,
• wspierana wersja TypeScript została podniesiona do 4.2.

Aktualizacja dokumentacji Angular 12

Razem z 12 wersją Angulara Twórcy zaktualizowali sporą część dokumentacji technicznej. Jeżeli jeszcze jej nie czytaliście to polecam.

Jeżeli nie mieliście jeszcze styczności z Angularem polecam Ci ten framework. Dowiedz się jak zacząć zabawę i zainstalować Angulara na Ubuntu.

Cały wykaz zmian wprowadzonych w Angular 12 można zobaczyć na stronie projektu.