Ten post został pierwotnie opublikowany w dniu moja strona internetowa: https://dsebastien.net
W tym artykule omówię (prawie) wszystko, na co warto zwrócić uwagę w tym nowym wydaniu. Podkreślę również, co zmieniło się wokół Angulara, tak jak zrobiłem to z moimi poprzednimi artykułami o Kątowy 11 i Kątowy 10.
Jeśli szukasz tylko widoku z lotu ptaka, sprawdź oficjalne ogłoszenie o wydaniu. Tutaj zajrzę się znacznie głębiej w informacje o wydaniu.
Dołącz do ligi Bluszcz…
Zespół Angulara pracował nad Bluszcz (nowy potok kompilacji i renderowania) od 2018 roku. W końcu został wydany z Angular 8. Od Angular 9, Ivy jest domyślnym dla nowych projektów, a ekosystem powoli do niego migruje. Z kątowym 12, stary View Engine jest teraz oficjalnie przestarzały. Zostanie usunięty w przyszłej wersji głównej. Nie będzie również możliwe tworzenie nowych aplikacji za pomocą View Engine. Wreszcie, Ivy jest teraz domyślnym dla nowych projektów bibliotecznych.
W tym momencie autorzy bibliotek mogą nadal polegać na View Engine dzięki ngcc
(kompilator zgodności Angulara), ale naprawdę nadszedł czas, aby ocenili, czy mogą przenieść swoje biblioteki do Ivy, czy nie. Kilka tygodni temu Minko Gechev opublikował artykuł wyjaśnić to szczegółowo. Sprawdź także powiązane RFC.
Na wypadek gdybyś nie wiedział ngcc
to mały proces uruchamiany po utworzeniu projektu Angular lub zainstalowaniu zależności. Gdy widzisz wiadomości takie jak Compiling ... : es2015 as esm2015
, to jest ngcc
wykonuje swoją pracę. Co ngcc
robi to kompilowanie bibliotek, które opierają się na View Engine, aby Ivy mógł je wykorzystać.
Tak jak ja, prawdopodobnie zauważyłeś, że ngcc
wykonanie zajmuje dużo czasu i ma bardzo negatywny wpływ na wrażenia programistów. Dlatego tak ważna jest jak najszybsza migracja ekosystemu Angular do Ivy. Po drugie, dopóki większość ekosystemu nie przejdzie dalej, zespół Angulara będzie musiał utrzymywać View Engine, co jest problematyczne z wielu powodów. Wreszcie, biblioteki, które opierają się na View Engine, nie mogą polegać na bibliotekach Ivy.
Autorzy bibliotek prawdopodobnie nie mogą zbyt szybko migrować do Ivy, ale powinni wyraźnie zachęcać niechętnych użytkowników do aktualizacji. Tak czy inaczej, ścieżką naprzód jest jak najszybsze przeniesienie wszystkich rzeczy do Ivy
Jest świetny artykuł o Ivy tam.
Żegnaj kątomierz
W kwietniu zespół Angulara ogłosił plany zakończenia wsparcia dla Kątomierz Na koniec 2022.
Od wersji Angular 12 kątomierz nie będzie domyślnie dołączany do nowych projektów. Zamiast tego Angular CLI zapewni opcje korzystania z innych rozwiązań, takich jak Cyprys, Sterownik sieciowyIOlub TestCafe. Oznacza to, że ng e2e
polecenie powinno być nadal obsługiwane w przyszłości.
Jak wyjaśniono w ogłoszenie, jeszcze w 2013 roku, kiedy powstał Protractor, Sterownik sieciowy nie był standardowy, a testy end-to-end (e2e) były trudne do napisania i koszmarne do utrzymania. Kątomierz przyniósł innowacyjne rozwiązanie poprzez owijanie selen-webdriveri zapewnił sposób kontrolowania przepływu wykonywania.
Oczywiście od tego czasu wiele się zmieniło. Mamy teraz WebDriver
Pszczoła, async
i await
(nawet na najwyższym poziomie await
, och). Również ekosystem ewoluował. Rozwiązania takie jak Cyprys, Dramaturg, Lalkarz zyskały dużą (zasłużoną) popularność. Na przykład narzędzia takie jak Cypress zapewniają znacznie lepsze wrażenia programistyczne niż Protractor, wykorzystują nowoczesne standardy, a nawet obsługują testy w różnych przeglądarkach (wśród innych potężnych możliwości). Kolejną zaletą obecnych narzędzi do testowania de facto e2e jest to, że są one niezależne od frameworka, co jest bardzo cenne.
Krótko mówiąc, utrzymanie Protractora nie ma większego sensu dla zespołu Angulara. Ewoluujący teraz Kątomierz wymagałby zbyt dużego wysiłku i spowodowałby mnóstwo przełomowych zmian. Więcej szczegółów znajdziecie w RFC, to ciekawa lektura.
Oś czasu jest ważna dla zespołów/projektów, które zainwestowały dużo czasu i energii w pisanie testów e2e za pomocą Protractora. Zespół Angulara nadal jest zajęty oceną opinii zebranych za pośrednictwem RFC, więc prawdopodobnie będziemy wiedzieć więcej jeszcze w tym roku.
W każdym razie; wypróbuj Cypress, jeśli jeszcze tego nie zrobiłeś, nie zawiedziesz się! Nawiasem mówiąc, wciąż polecam wszystkim, aby zaczęli używać Nrwl NX, wspaniałe rozwiązanie, które obejmuje obsługę Angular, React, Next.js, Cypress i wiele więcej
Zerowa koalescencja
Angular 12 zawiera wsparcie dla używania zerowy operator koalescencji w szablonach kątowych. I to jest niesamowite! Ten operator jest obsługiwany w TypeScript od wersji 3.7.
Jeśli nie słyszałeś o tym operatorze, pozwól, że dam ci szybkie wyjaśnienie. Chodzi o to, aby móc zdefiniować wartość awaryjną na wypadek, gdyby coś było null
or undefined
. Oto przykład:
If foo
is null
or undefined
, następnie x
zostanie ustawiony na true
(tj. wartość zastępcza) i możemy ustawić ją na cokolwiek zechcemy.
Bez tego niesamowitego ??
operator, zamiast tego musielibyśmy napisać to:
let x = foo !== null && foo !== undefined ? foo : true;
Teraz, gdy Angular również to obsługuje, możemy wreszcie pisać wyrażenia takie jak:
{{ age ?? calculateAge() }}
Zamiast starej i bardziej gadatliwej alternatywy. SCHLUDNY!
Możesz dowiedzieć się więcej o tej zmianie tutaj.
Więcej informacji na temat zerowego łączenia można znaleźć w in Podręcznik TypeScript jak również na DND.
Obsługa TypeScript 4.2
Angular 12 wprowadza obsługę TypeScript 4.2, co oznacza, że możemy teraz używać a tona nowych wspaniałych funkcji językowych. Zrezygnowano również z obsługi TypeScript 4.0 i 4.1.
Oto krótkie podsumowanie tego, co zawiera TS 4.2:
Inteligentne zachowanie aliasów: Oczekiwane typy są wyświetlane przez edytory kodu zamiast typów surowych, jak miało to miejsce wcześniej. Możesz dowiedzieć się więcej na ten temat tutaj.
Elementy wiodące / pauza środkowa w typach krotek: Możemy teraz dołączyć pozostałe elementy w dowolnym miejscu krotki (z kilkoma zastrzeżeniami). To całkiem fajne dla tych z nas, którzy od czasu do czasu polegają na krotkach. Dowiedz się więcej na ten temat tutaj.
Zrozumienie struktury projektu: TS 4.2 zawiera nowa flaga nazywa --explainFiles
, który instruuje TypeScript, aby wyprowadzał informacje o tym, dlaczego plik został uwzględniony w programie. Jest to bardzo przydatne przy rozwiązywaniu problemów.
Ulepszenia niewywołanych kontroli funkcji: TypeScript może teraz wykrywać więcej przypadków, w których funkcje nie są wywoływane. Na przykład podczas pisania foo
zamiast foo()
. Więcej szczegółów i przykładów można znaleźć tutaj.
Zmienne zdestrukturyzowane można teraz wyraźnie oznaczyć jako nieużywane: let [_first, second] = getValues();
, co jest niesamowite; koniec z błędami, gdy noUnusedLocals
jest włączony!
W rzeczywistości jest o wiele więcej, na przykład bardziej rygorystyczne kontrole in
operatora i kilka przełomowych zmian, które mogą mieć na Ciebie wpływ. Więc koniecznie sprawdź Informacje o wydaniu.
Obsługa pakietu internetowego 5
Angular 11 przyniósł nam eksperymentalne wsparcie dla Webpack 5. Dzięki Angular 12 wsparcie Webpack 5 jest teraz gotowe do produkcji. w00t!
Jeśli nie spojrzałeś Pakiet internetowy 5, będziesz zdumiony. Webpack 5 został wydany w październiku 2020 r., więc jest już dość stabilny. Webpack jest obecnie w wersja 5.37 (wydany kilka dni temu).
Oto krótkie wyjaśnienie, co zmieniło się w Webpack 5 i dlaczego tak się z tego cieszę 🤩 🤩
Po pierwsze, jak wiesz, Webpack to klucz kawałek układanki Angular CLI i odgrywa dużą rolę w wielkości pakietu, wydajności kompilacji itp.
Po drugie, Webpack 5 jest ważnym wydaniem nie bez powodu. Zawiera szereg przełomowych zmian, co wyjaśnia, dlaczego aktualizacja Angulara i miliarda narzędzi/bibliotek w ekosystemie zajęła trochę czasu.
W informacjach o wydaniu zespół Webpack wskazał, że Webpack 5 koncentruje się na:
- Poprawa wydajności kompilacji dzięki uporczywy buforowanie
- Poprawa długoterminowego buforowania dzięki lepszym algorytmom i wartościom domyślnym
- Poprawa rozmiaru pakietu dzięki lepszemu Shakingowi drzewa i generowaniu kodu
- Poprawa kompatybilności z platformą internetową
- Oczyszczanie struktur wewnętrznych
- Wprowadzamy teraz przełomowe zmiany (haha), które pozwolą im pozostać na v5 tak długo, jak to możliwe
Najfajniejszą cechą Webpack 5 jest jego wsparcie dla Federacji Modułów, który zapewnia fundamenty niezbędne do ułatwienia tworzenie mikro front-endów. To trochę poza zakresem tego artykułu, ale w mgnieniu oka federacja modułów umożliwia różnym kompilacjom zachowywanie się jak ogromny wykres połączonych modułów i pozwala nam importować i używać modułów ze zdalnych kompilacji. Sprawdzić oficjalna dokumentacja wiedzieć więcej.
Wśród głównych zmian Webpack 5 porzucił wszystko, co wcześniej było przestarzałe (np. NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), jak również IgnorePlugin
i BannerPlugin
.
Usunięto również wypełniacze Node.js, które wcześniej były automatycznie wstrzykiwane; i to jest jedna z największych zmian w tym wydaniu. Te wypełnienia początkowo pozwoliły Webpackowi na używanie w przeglądarce modułów stworzonych dla Node.js. To było fajne, ale miało poważny minus: większe paczki. Ponadto te wypełnienia były coraz mniej przydatne, ponieważ istniały albo kompatybilne z przeglądarkami alternatywy bibliotek, albo określone dystrybucje z obsługą przeglądarki. Od Webpack 5, ponieważ te wypełnienia nie będą już dodawane automagicznie, możemy natknąć się na kilka niespodzianek. Na przykład w przypadkach, gdy korzystamy z modułów stworzonych dla Node.js w przeglądarce, nie zdając sobie sprawy, że wcześniej działała dzięki Webpackowi. Możesz dowiedzieć się więcej na ten temat tutaj.
Webpack 5 wprowadził lepszą obsługę długoterminowego buforowania. W trybie produkcyjnym teraz domyślnie zawiera nowe algorytmy:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Jak wskazuje wartość, te algorytmy przypisują deterministyczne identyfikatory do porcji i modułów oraz deterministyczne nazwy do eksportów.
Webpack 5 jest w stanie wykonywać zagnieżdżone potrząsanie drzewami, śledząc dostęp do zagnieżdżonych właściwości eksportu (witamy w Matrixie), co powinno jeszcze bardziej usprawnić potrząsanie drzewami. Ponadto może teraz analizować zależności między eksportami i importami modułu,. Wprowadzono również ulepszenia do CommonJS trzęsienie drzewa. I jest ich mnóstwo więcej optymalizacji.
Webpack 5 zawiera również szereg zmian poprawiających wrażenia programistów. Na przykład jest nowy nazwany algorytm identyfikatora porcji który jest domyślnie włączony w trybie programistycznym. Ten nowy algorytm nadaje fragmentom nazwy czytelne dla człowieka. ten target
nieruchomość również została znacznie ulepszony.
Szczerze mówiąc, nie mam tu wystarczająco dużo miejsca, aby pokryć wszystko, co nowe z Webpackiem 5, tam„s właśnie droga także dużo. Więc zatrzymam się tutaj
Jeśli używasz Webpacka tylko pośrednio przez Angular CLI, to większość z nich powinna być dla Ciebie „przejrzysta”. Ale jeśli używasz niestandardowa kompilacja Webpack w swoim projekcie, prawdopodobnie powinieneś przyjrzeć się przewodnik po migracji.
Na koniec, jeśli jesteś ciekawy, co będzie dalej z Webpack, sprawdź plan działania na 2021 r i oczywiście najnowsze informacje o wydaniu.
Obsługa IE11 jest przestarzała
Choć może to zabrzmieć smutno (kogo żartuję? 😂), Angular 12 wycofuje wsparcie dla IE11. Dla większości z nas Internet Explorer jest martwy, ale niestety wiele organizacji nadal używa go w produkcji. Obsługa IE 11 zostanie zatem usunięta przez Angular 13, co oznacza, że te organizacje naprawdę muszą zacząć odchodzić od IE (co i tak jest dobre). Żadnych więcej wymówek!
Gdy wsparcie IE zniknie, Angular będzie mniejszy, szybszy, a przez to lepszy dla nas wszystkich. Ponadto, gdy zniknie ciężar utrzymywania wstecznej kompatybilności ze starszymi przeglądarkami (IE11 jest ostatnią z nich!), wtedy Angular będzie mógł korzystać z nowoczesnych interfejsów API (np. Zmienne CSS, Obserwator skrzyżowania, Siatka CSS, Proxy, Animacje internetowe, jeszcze).
Naprawdę nie mogę się doczekać, aż zniknie obsługa IE!
Ścisłe domyślnie
TAK TAK TAK 🤩. Począwszy od Angulara 12, ścisły tryb Angular jest domyślnie włączone w interfejsie wiersza polecenia. I to jest niesamowite.
Jak wiecie, jestem wielkim fanem trybu ścisłego TypeScript, ale także trybu ścisłego Angulara. Jeśli chcesz wiedzieć więcej, sprawdź artykuł, który napisałem w zeszłym roku i Minko Gecheva artykuł wyjaśniający zmianę.
Domyślna kompilacja produkcyjna
Do tej pory prowadzenie ng build
polecenie stworzyło wersję rozwojową. Od Angular 12, ng build
będzie teraz domyślnie kompilacją produkcyjną.
Mamy nadzieję, że pomoże to niektórym zespołom uniknąć popełnienia błędu polegającego na tworzeniu i wdrażaniu kompilacji programistycznych w środowiskach produkcyjnych. Chociaż obawiam się, że zespoły, które popełnią ten błąd, będą miały jeszcze inne problemy do załatwienia
Wsparcie Sass dla stylów inline
Angular obsługuje Sassa od bardzo dawna, ale do tej pory mogliśmy używać Sassa tylko w zewnętrznych arkuszach stylów. Dzięki Angularowi 12 można teraz używać Sassa razem z wbudowanymi stylami komponentów (tj. w obrębie styles
własność).
Należy to włączyć, ustawiając nowy inlineStyleLanguage
własność do true
in angular.json
.
Obsługa tylnego wiatru
Tailwind jest teraz oficjalnie obsługiwany przez Angular. Właściwie wsparcie zostało wprowadzone w Angular CLI w wersji 11.2.
Tylny wiatr to zajęty przejmowaniem świata, zwłaszcza teraz, gdy ma rad kompilator JIT, i wspaniale jest mieć wbudowaną obsługę tego w Angularze.
Wcześniej wymagane było dodanie Tailwind do projektu Angular dostosowywanie kompilacji Webpack. Nigdy więcej! Teraz dodanie Tailwind jest tak proste, jak zainstalowanie pakietu i utworzenie tailwind.config.js
plik za pomocą npx tailwindcss init
i upewnij się, że włączyłeś Tryb JIT Tailwind.
Ulepszenia HTTP
Angular 12 wprowadza szereg ulepszeń dotyczących obsługi HTTP.
Metadane dla żądań i przechwytywaczy
Po pierwsze, HttpClient
może być teraz używany do przechowywania i pobierania niestandardowych metadanych dla żądań. Jest to szczególnie przydatne w przypadku przechwytywaczy HTTP. Z tej możliwości można korzystać za pośrednictwem nowego HttpContext
.
Wcześniej zapewnienie kontekstu przechwytywaczom było skomplikowane, ale teraz będzie to znacznie prostsze. Teraz różne metody HTTP dostarczane przez HttpClient
zawierać nowy context: HttpContext
opcja, którą możemy użyć do przekazania na mapie.
Netanel bazal napisał o tym artykuł, więc sprawdź, jeśli chcesz wiedzieć więcej.
appendAll na HttpParams
Połączenia HttpParams
klasa ma teraz nową appendAll
metoda, która może być wykorzystana do łatwego dodania zestawu parametrów na raz:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Parametry można teraz przekazywać jako liczby i wartości logiczne
Wcześniej liczby i wartości logiczne nie mogły być bezpośrednio używane jako parametry HTTP. Musieliśmy je przekształcić w struny. Nigdy więcej!
Kod stanu HTTP
Angular wprowadził własną listę czytelnych dla człowieka nazw kodów stanu HTTP, w formie const enum.
Wcześniej musieliśmy wprowadzić własne rozwiązanie, jeśli chcieliśmy mieć nazwy czytelne dla człowieka. Dzięki tej nowej funkcji możemy teraz zamiast tego używać HttpStatusCode
.
Na przykład:
if (response.status === HttpStatusCode.Ok) { ...
}
Dla tych, którzy używają TypeScript zarówno na zapleczu, jak i na froncie, nie jest to bardzo przydatne (ponieważ prawdopodobnie wszyscy mamy już własną abstrakcję), ale jeśli twój projekt używa tylko TypeScript / Angular na interfejsie, to jest to niezła poprawa.
XhrFabryka
Połączenia XhrFactory
klasa została przeniesiona do innego pakietu. Jest teraz wyeksponowany przez angular/common
zamiast angular/common/http
.
Pamiętaj, że migracja została uwzględniona w aktualizacji, więc nawet nie zauważysz, jeśli uruchomisz ng update
Zmiany routera
Router Angular zmienił się nieco w Angular 12.
Po pierwsze, routerLinkActiveOptions
poprawiono dyrektywę. Teraz można określić, czy wymagamy dokładnego dopasowania różnych części adresu URL, aby dodać klasę CSS do linku.
Wcześniej mogliśmy wymagać tylko dokładnego dopasowania (lub nie) dla całego adresu URL:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Teraz możemy zamiast tego zapewnić szczegółowe reguły dopasowywania dla ścieżek, parametrów zapytań, parametrów macierzy i fragmentów.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
Obsługiwane wartości to exact
, ignored
i subset
, które można wykorzystać do queryParams
i matrixParams
. W przypadku ścieżek możesz przejść przez exact
or subset
, exact
or ignored
dla fragment
.
Zauważ, że isActive
metoda routera również akceptuje te nowe opcje.
fragment jest nullable
Do tej pory, ActivatedRouteSnapshot.fragment
nie był nullable. Zmieniło się to w Angular 12. Nie martw się jednak zbytnio; ng update
cię osłania.
Formularze
Większa kontrola nad emitowanymi zdarzeniami
Połączenia emitEvent
opcja została dodana do różnych metod FormGroup
i FormArray
. Dzięki tej zmianie będzie można teraz kontrolować, czy zdarzenia muszą być emitowane, czy nie w większej liczbie przypadków.
Na przykład poprzednio, gdy kontrolka została usunięta za pomocą removeControl
metoda FormGroup
, wtedy zdarzenie było zawsze emitowane. Dzięki tej zmianie będziemy mogli uniknąć takich problemów.
Połączenia emitEvent
opcja została dodana do następujących metod FormGroup
:
addControl
removeControl
setControl
Oraz do następujących metod FormArray
:
push
insert
removeAt
setControl
clear
obsługa walidatorów min i max dla formularzy opartych na szablonach
Połączenia min
i max
walidatory Angulara mogą być teraz używane z formularzami opartymi na szablonach:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Zauważ, że jest to przełomowa zmiana, ponieważ wcześniej były one ignorowane.
I18n
W tym wydaniu zmienił się system i18n Angulara.
Jak wskazano w poście na blogu z ogłoszeniem, obecnie używanych jest wiele starszych formatów identyfikatorów wiadomości. Są one delikatne i mogą pojawić się problemy z powodu białych znaków, szablonów formatowania i wyrażeń ICU.
Angular 12 wprowadza nowy kanoniczny format identyfikatora wiadomości (tj. jeden format, który wszystkim rządzi). Ten format jest bardziej odporny i bardziej intuicyjny.
Ten format zmniejszy niepotrzebne unieważnianie tłumaczeń i związane z nimi koszty retranslacji w aplikacjach, w których tłumaczenia nie są zgodne, na przykład ze względu na zmiany białych znaków.
Od wersji 11 nowe projekty są automatycznie konfigurowane do korzystania z nowych identyfikatorów wiadomości, a teraz dostępne są narzędzia do migracji istniejących projektów z istniejącymi tłumaczeniami. Jeśli jesteś zaniepokojony, możesz użyć localize-migrate
narzędzie do migracji identyfikatorów wiadomości:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Możesz znaleźć więcej informacji tutaj.
poprawa wydajności
W tej wersji wprowadzono szereg ulepszeń wydajności. Najbardziej oczywisty pojawia się wraz z aktualizacją do Webpack 5, ale to nie wszystko:
Szereg nieużywanych metod zostało usuniętych z DomAdapter
. Jest fajny, ponieważ jego metody nie są podatne na wstrząsy i zostały uwzględnione we wszystkich aplikacjach Angular, jak wyjaśniono w odpowiedni PR.
Angular generuje teraz mniej kodu do bezpiecznego dostępu do nieruchomości; na przykład dla wyrażeń szablonowych, takich jak a?.b
oraz nowo obsługiwane zerowe koalescencje: a ?? b
.
Kompilator Angular obsługuje teraz kompilację przyrostową nawet w obecności przekierowanych plików źródłowych. Wcześniej nie można było ponownie użyć pracy z poprzedniej kompilacji, gdy deduplikowane pliki źródłowe TypeScript. Możesz przeczytać więcej na ten temat tutaj.
Kompilator Angular buforuje teraz ścieżkę systemu plików plików źródłowych. Wcześniej wielokrotnie nazywano fs.resolve()
, co jest czasochłonne.
Połączenia getDirectives
funkcja została ulepszona. Wraz z tą zmianą ng
Przestrzeń nazw została również rozszerzona o nową getDirectiveMetadata
użyteczność.
I jest trochę więcej.
ng ulepszeń API
Połączenia ng
debugowanie API z którego możemy korzystać z narzędzi programistycznych przeglądarki został ulepszony w Angular 12.
Jest nowa funkcja o nazwie getDirectiveMetadata
, który może służyć do pobierania informacji o składnikach i dyrektywach. Nie sądzę, że będziemy go często potrzebować, ale przyszłe ulepszenia narzędzi deweloperskich najprawdopodobniej będą na tym polegać. Możesz dowiedzieć się więcej tutaj.
Nowa funkcja profilera o nazwie esetProfiler
został również zaimplementowany i jest również dostępny w trybie produkcyjnym. Ta nowa funkcja może być wywołana w wielu scenariuszach. Na przykład może być używany do śledzenia czasu trwania tworzenia szablonów, aktualizacji szablonów, przetwarzania hooków cyklu życia itp. Ponownie, ten interfejs API zostanie wykorzystany przez nadchodzące narzędzia programistyczne, dając nam dużo bardziej wnikliwe informacje o tym, jak działają nasze aplikacje na czas wykonywania.
W tej chwili jest to wciąż eksperymentalne, ale myślę, że później dowiemy się o tym więcej. Jestem ciekaw, czy/kiedy narzędzia takie jak Sentry zintegrują obsługę zbierania tego rodzaju informacji, aby zapewnić nam przydatne pulpity wydajności.
Kilka dni po wydaniu Angulara 12 zespół Angulara ma ogłosił dostępność zupełnie nowych narzędzi Angular Dev Tools dla Google Chrome. Możesz je pobrać tutaj.
Korzystając z tego zupełnie nowego rozszerzenia przeglądarki, możesz łatwo sprawdzić swoje aplikacje Angular podczas opracowywania. To wspiera:
- Wizualizacja struktury aplikacji (tj. inspekcja drzewa komponentów)
- Eksploracja i edycja komponentów
- Profilowanie występów
Korzystając z wbudowanego profilera, możemy rejestrować zdarzenia wykrycia zmian i przeglądać je w miarę ich występowania. Dla każdego cyklu wykrywania zmian możemy sprawdzić, jak długo to trwało, które komponenty trwały najdłużej, czy cykl ten powodował spadki klatek.
Angular wcześniej posiadał pół-oficjalne narzędzia programistyczne przez Zapowiedź (które są podstawą nowych narzędzi!), ale te nie były kompatybilne z Ivy. To świetna wiadomość dla społeczności Angulara!
I inne…
Jest tonę więcej drobne zmiany w tym wydaniu. Oto krótki przegląd.
APP_INITIALIZER obsługuje teraz Observables
Do tej pory nie można było używać Observables z APP_INITIALIZER
. Od Angulara 12 możemy to teraz zrobić, co pozwoli na czystszy kod!
Jeśli jeszcze nie wiedziałeś o tej funkcji Angulara, APP_INITIALIZER
is token którego możemy użyć do zdefiniowania funkcji, które muszą zostać wykonane podczas inicjalizacji aplikacji. Jeśli ta funkcja jest asynchroniczna, zwrócenie a Promise
lub Observable
(nowe :p), to Angular czeka na zakończenie przed uruchomieniem aplikacji.
Ta zmiana jest mile widziana, ponieważ oznacza, że możemy napisać jeszcze więcej kodu za pomocą RxJS, zamiast „cofać się” do Promise
API.
Możesz przeczytać o tym więcej tutaj.
Kontrola runtime nad animacjami
Wcześniej jedynym sposobem na wyłączenie animacji było zapewnienie NoopAnimationsModule
. Od Angular 12 można teraz wyłączyć animacje na podstawie informacji o czasie wykonywania, używając BrowserAnimationModule.withConfig
metody i przekazując ją disableAnimations
właściwość logiczna.
Nowa metoda historyGo w usłudze lokalizacji
Połączenia LocationService
Angulara zawiera teraz historyGo
metoda, która może być wykorzystana do nawigowania do określonej strony w historii sesji, identyfikowanej przez jej względną pozycję w stosunku do bieżącej strony. Ta metoda odpowiada rodzimemu window.history.go
Metoda. Sprawdź MDN dla niektórych przykładów.
Ulepszenia usługi językowej
Usługa językowa, która zapewnia IDEom wszystkie przydatne informacje na temat kodu Angular, również została ulepszona w tym wydaniu.
W Angular 12 usługa językowa jest domyślnie włączona (wcześniej wymagało to od nas zgody).
Od Angular 12 wykryje również, czy ścisłe sprawdzanie typu szablonu nie jest włączony i doradzi, aby je włączyć.
Usługa językowa obejmuje teraz również możliwości śledzenia wydajności, które można wykorzystać do śledzenia wydajności. Można to włączyć w VSCode, jak wyjaśniono tutaj (jest to jednak dość niski poziom).
Jeśli nie znasz jeszcze usługi językowej, sprawdź oficjalne dokumentylub fajny wpis na blogu napisany przez Oddział Ninja, albo to wideo wstępne.
Wyłącz reguły lint bezpośrednio z szablonów HTML
Kompilator szablonów Angular śledzi teraz komentarze HTML.
Wcześniej nie było możliwe wyłączenie reguł linter z szablonów HTML, ponieważ kompilator szablonów Angular ignorował komentarze. Obejściem było wyłączenie tych reguł dla całego szablonu z kontrolera komponentu. Dzięki tej zmianie możliwe będzie teraz dokładniejsze wykonanie tego z szablonu:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Och, czystszy kod!
DatePipe obsługuje teraz standardowy dzień tygodnia ICU Stand Alone
Wcześniej to nie było to możliwe ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? aby sformatować datę jako samodzielny dzień tygodnia za pomocą DatePipe.
Dzięki tej zmianie obsługiwane jest teraz fińskie formatowanie daty i jestem pewien, że to świetna wiadomość dla części społeczności Angulara 😉
Obsługa forwardRef w dostarczonych polach dekoratorów do wstrzykiwania
Teraz można używać forwardRef
w ciągu providedIn
pole @Injectable
dekorator.
Nowy zaczep transformResource w interfejsie ResourceHost
A transformResource
metoda została dodana do ResourceHost
berło. Dzięki temu oprzyrządowanie może teraz robić takie rzeczy, jak wprowadzenie obsługi preprocesorów dla stylów wbudowanych. To właśnie umożliwia nową obsługę SASS ze stylami wbudowanymi.
Możesz dowiedzieć się więcej na ten temat tutaj i tutaj.
Możliwość tworzenia niestandardowych implementacji gniazd routera
Do tej pory tworzenie niestandardowych gniazd routera było możliwe, ale wymagało przeskakiwania przez niektóre obręcze (tj. rejestrowania niestandardowych gniazd w ChildrenOutletContexts
).
Angular 12 zapewnia czystsze wsparcie dla niestandardowych gniazd routera.
Poprawki błędów
Jak zwykle, w tym wydaniu znajduje się milion poprawek błędów.
Oto kopia informacji o wersji:
- animacje: zapewnić spójne porządkowanie przestrzeni nazw przejścia (#19854) (01cc995)
- animacje: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (e918250)
- animacje: czyszczenie elementów DOM po usunięciu widoku głównego (#41059) (c49b280)
- animacje: zezwól na animacje na elementach w cieniu DOM (#40134) (tata42c8), zamyka się #25672
- animacje: czyszczenie elementów DOM po usunięciu widoku głównego (#41001) (a31da48)
- bazel: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (8503246)
- bazel: zaktualizuj narzędzia do budowania, aby uzyskać najnowsze zmiany w rules_nodejs (#40710) (696f7 pne)
- bazel: zaktualizuj test integracji do użycia Rules_nodejs@3.1.0 (#40710) (34of89a)
- bazel: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (2c90391)
- wyciskanie: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (e721a5d)
- wspólny: dodaj właściwy ContentType dla wartości logicznych za pomocą treści żądania HttpClient (#38924) (#41885) (922a602)
- wspólny: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (f2b6fd8)
- wspólny: scroller rzutni nie znajduje elementów wewnątrz cienia DOM (#41644) (c0f5ba3), zamyka się #41470
- wspólny: tymczasowo reeksportować i deprecjonować
XhrFactory
(#41393) (7dfa446) - wspólny: lokalizacja czyszczenia zmienia detektory po usunięciu widoku głównego (#40867) (38524c4), zamyka się #31546
- wspólny: zezwól na liczbę lub wartość logiczną jako parametry http (#40663) (91cdc11), zamyka się #23856
- wspólny: unikaj mutowania obiektu kontekstu w NgTemplateOutlet (#40360) (d3705b3), zamyka się #24515
- kompilator: zachowaj reguły @page w enkapsulowanych stylach (#41915) (3e365ba), zamyka się #26269
- kompilator: paski selektorów o zasięgu z
@font-face
zasady (#41815) (2a11cda), zamyka się #41751 - kompilator: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (bae8126)
- kompilator: niedosłowne szablony wbudowane niepoprawnie przetworzone w częściowej kompilacji (#41583) (ab257b3)
- kompilator: nie generuje instrukcji aktualizacji dla ng-template wewnątrz alternatywnych przestrzeni nazw (#41669) (2bcbbda), zamyka się #41308
- kompilator: unikaj parsowania EmptyExpr z rozpiętością wstecz (#41581) (e1a2930)
- kompilator: obsługiwać niestandardowe właściwości CSS z rozróżnianiem wielkości liter (#41380) (e112e32), zamyka się #41364
- kompilator: uwzględniać używane komponenty podczas kompilacji JIT częściowej deklaracji komponentów (#41353) (ff9470b), zamyka się #41104 #41318
- kompilator: obsługuje wiele
:host-context()
selektory (#40494) (07b7af3), zamyka się #19199 - kompilator: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (f728490)
- kompilator-cli: użyj ” jako źródłowego adresu URL mapy szablonów pośrednich (#41973) (7a4d980), zamyka się #40854
- kompilator-cli: udostępnij linker jako wtyczkę Babel (#41918) (8fdac8f)
- kompilator-cli: preferować eksporty bez aliasów w nadajnikach referencyjnych (#41866) (75bb931), zamyka się #41443 #41277
- kompilator-cli: zezwól linkerowi na przetwarzanie zminimalizowanych wartości logicznych (#41747) (1fb6724), zamyka się #41655
- kompilator-cli: dopasuj deklaracje częściowe indeksowane ciągiem (#41747) (f885750), zamyka się #41655
- kompilator-cli: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (5b463f4)
- kompilator-cli: typy literałów autouzupełniania w szablonach. (#41456) (#41645) (8b2b5if)
- kompilator-cli: nie popełnij błędu z wstępnym przetwarzaniem, jeśli komponent nie ma wbudowanych stylów (#41602) (a5fe8b9)
- kompilator-cli: upewnij się, że kompilator utworów
ts.Program
s poprawnie (#41291) (deac74) - kompilator-cli: zapobiec usuwaniu domyślnych importów w przyrostowych rekompilacjach (#41557) (7f16515), zamyka się #41377
- kompilator-cli: rozwiązać
rootDirs
do absolutnego (#41359) (3e0fda9), zamyka się #36290 - kompilator-cli: Dodaj
useInlining
możliwość wpisania check config (#41043) (09aefd2), zamyka się #40963 - kompilator-cli:
readConfiguration
istniejące opcje powinny zastąpić opcje w tsconfig (#40694) (b7c4d07) - kompilator-cli: rozciągać się
angularCompilerOptions
w tsconfig z węzła (#40694) (5eb1954), zamyka się #36715 - kompilator-cli: zaktualizuj testy integracji ngcc o najnowsze zmiany w rules_nodejs (#40710) (d7f5755)
- kompilator-cli: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (b75d7cb)
- rdzeń: nie zachowuj dynamicznie kompilowanych komponentów i modułów (#42003) (1449c5c), zamyka się #19997
- rdzeń: wywołaj profiler wokół punktów zaczepienia cyklu życia ngOnDestroy (#41969) (e9ddc57)
- rdzeń: AsyncPipe jest teraz kompatybilny z RxJS 7 (#41590) (9759 pne)
- rdzeń: obsługuj wiele atrybutów i18n z powiązaniami wyrażeń (#41882) (73c6c64), zamyka się #41869
- rdzeń: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (f9c1f08)
- rdzeń: wykryć zsyntetyzowane konstruktory, które zostały obniżone przy użyciu TS 4.2 (#41305) (274dc15), zamyka się #41298
- rdzeń: Przełącznik
emitDistinctChangesOnlyDefaultValue
do prawdy (#41121) (7096246) - rdzeń: usuń zduplikowaną stałą EMPTY_OBJ (#41066) (bf158e7)
- rdzeń: usuń zduplikowaną stałą EMPTY_ARRAY (#40991) (e12d9de)
- rdzeń: zezwól na aktualizację kontekstu EmbeddedViewRef (#40360) (a3e1719), zamyka się #24515
- rdzeń: make DefaultIterableDiffer zachowaj kolejność duplikatów (#23941) (a826926), zamyka się #23815
- rdzeń: Opcje łączenia stref NgZone powinny poprawnie uruchamiać się w trybie onStable (#40540) (22f9e45)
- elementy: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (4f5d094)
- elementy: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (efd4149)
- formy: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (dc975ba)
- http: zakończyć żądanie po upływie limitu czasu (#39807) (61a0b6d), zamyka się #26453
- http: emituj błąd przy zdarzeniu przerwania XMLHttpRequest (#40767) (3897265), zamyka się #22324
- obsługa językowa: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (9b6198c)
- obsługa językowa: używaj wersji skryptów do kompilacji przyrostowych (#41475) (78236bf)
- obsługa językowa: Podaj tylko uzupełnienia właściwości kątowych w szablonach (#41278) (0226a11)
- obsługa językowa: Dodaj opcję wtyczki, aby wymusić strictTemplates (#41062) (e9e7c33)
- obsługa językowa: użyj pojedynczego punktu wejścia dla Ivy i View Engine (#40967) (e986a97)
- zlokalizować: zrelaksuj błąd do ostrzeżenia o braku celu (#41944) (35ceed2), zamyka się #21690
- zlokalizować: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (658d1f)
- zlokalizować: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (4b469c9)
- ngcc: wykryć zsyntetyzowane konstruktory, które zostały obniżone przy użyciu TS 4.2 (#41305) (8d3da56), zamyka się #41298
- platforma-przeglądarka: zapobiega wyciekom pamięci węzłów stylu, jeśli używana jest enkapsulacja shadow DOM (#42005) (d555555), zamyka się #36655
- platforma-przeglądarka: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (ea05cfd)
- platforma-przeglądarka: skonfigurować
XhrFactory
w użyciuBrowserXhr
(#41313) (e0028e5), zamyka się #41311 - platforma-przeglądarka: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (7ecfd2d)
- platforma-przeglądarka-dynamic: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (bc45029)
- platforma-serwer: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (4b9d4fa)
- router: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (0067 wyd)
- router: Odzyskaj zapisaną trasę tylko wtedy, gdy strategia ponownego wykorzystania wskazuje, że należy ją ponownie dołączyć (#30263) (a4ff071), zamyka się #23162
- router: rekursywnie scalaj dopasowania pustych ścieżek (#41584) (1179dc8), zamyka się #41481
- router: fragment może być pusty (#37336) (b555160), zamyka się #23894 #34197
- router: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (350 podano)
- pracownik serwisu: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (6b823d7)
- pracownik serwisu: zaktualizuj rzutowania typu dla użycia JSON.parse (#40710) (4f7ff96)
- Aktualizacja: zachowaj $interval.flush, gdy używany jest ngMocks (#30229) (87dc851)
- Aktualizacja: zaktualizuj obsługiwany zakres wersji węzłów, aby uwzględnić tylko wersje LTS (#41822) (10c4523)
A tak przy okazji, czy zauważyłeś to? AsyncPipe
został załatany przez Bena Lesha, aby był kompatybilny zarówno z RxJS 6, jak i 7? Jakie to jest świetne?
Przełamywanie zmian
Jak zwykle w tym wydaniu wprowadzono szereg przełomowych zmian.
As oficjalne informacje o wydaniu są całkiem jasne, po prostu kopiuję/wklejam te tutaj:
- Zminimalizowane pakiety UMD nie są już zawarte w rozproszonych pakietach NPM.
- animacje: Elementy DOM są teraz poprawnie usuwane po usunięciu widoku głównego. Jeśli używasz SSR i używasz kodu HTML aplikacji do renderowania, musisz upewnić się, że zapiszesz kod HTML w zmiennej przed zniszczeniem aplikacji. Możliwe jest również, że testy mogą przypadkowo polegać na starym zachowaniu, próbując znaleźć element, który nie został usunięty w poprzednim teście. W takim przypadku nieudane testy należy zaktualizować, aby upewnić się, że mają odpowiedni kod konfiguracyjny, który inicjuje elementy, na których polegają
- pospolity: Metody
PlatformLocation
klasa, a mianowicieonPopState
ionHashChange
, używany do powrotuvoid
. Teraz te metody zwracają funkcje, które można wywołać, aby usunąć programy obsługi zdarzeń - wspólne: Metody
HttpParams
klasa teraz zaakceptujstring | number | boolean
zamiaststring
dla wartości parametru. Jeśli rozszerzyłeś tę klasę w swojej aplikacji, będziesz musiał zaktualizować sygnatury swoich metod, aby odzwierciedlić te zmiany - kompilator-cli: Połączone biblioteki nie generują już starszych identyfikatorów wiadomości i18n. Każda podrzędna aplikacja, która zapewnia tłumaczenia tych wiadomości, będzie musiała przenieść swoje identyfikatory wiadomości za pomocą
localize-migrate
narzędzie wiersza polecenia - core: Angular nie obsługuje już węzła v10, więc jeśli nadal używasz go w swoim środowisku programistycznym, naprawdę nadszedł czas na aktualizację!
- core: Wcześniej
ng.getDirectives
funkcja zwróciła błąd w przypadku, gdy dany węzeł DOM nie miał skojarzonego z nim kontekstu Angular (na przykład jeśli funkcja została wywołana dla elementu DOM poza aplikacją Angular). To zachowanie było niezgodne z innymi narzędziami do debugowania w debugng
przestrzeń nazw, która obsłużyła tę sytuację bez zgłaszania wyjątku. Teraz dzwonięng.getDirectives
funkcja dla takich węzłów DOM spowoduje zwrócenie pustej tablicy z rdzenia tej funkcji: Przełączanie domyślne naemitDistinctChangesOnlyDefaultValue
który zmienia domyślne zachowanie i może spowodować awarię niektórych aplikacji, które opierają się na nieprawidłowym zachowaniu
emitDistinctChangesOnly
flaga również została wycofana i zostanie usunięta w przyszłej wersji głównej
Poprzednie wdrożenie wywołałoby zmiany QueryList.changes.subscribe
kiedykolwiek QueryList
został przeliczony. Spowodowało to sztucznie zawyżoną liczbę powiadomień o zmianach, ponieważ możliwe jest, że ponowne obliczenia QueryList
wyniki na tej samej liście. Kiedy QueryList
przeliczanie jest szczegółem implementacji i nie powinno być tym, co określa, jak często powinno się uruchamiać zdarzenie zmiany.
Niestety, naprawienie tego zachowania spowodowało awarię zbyt wielu istniejących aplikacji. Z tego powodu Angular uważa tę poprawkę za łamiącą poprawkę i wprowadził flagę w @ContentChildren
i @ViewChildren
, który kontroluje zachowanie.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Dla wstecznej kompatybilności przed wersją 12emitDistinctChangesOnlyDefaultValue
została ustawiona na false
. Ta zmiana
zmienia wartość domyślną na true
.
- rdzeń: Rodzaj
APP_INITIALIZER
token został zmieniony, aby dokładniej odzwierciedlać typy wartości zwracanych, które są obsługiwane przez Angular. Wcześniej każde wywołanie zwrotne inicjatora było wpisywane jako returnany
, to jest terazPromise<unknown> | Observable<unknown> | void
. W mało prawdopodobnym przypadku, gdy aplikacja korzysta zInjector.get
orTestBed.inject
API do wstrzykiwaniaAPP_INITIALIZER
token, może być konieczne zaktualizowanie kodu, aby uwzględnić bardziej rygorystyczny typ.
Ponadto TypeScript może zgłosić błąd TS2742, jeśli if APP_INITIALIZER
token jest używany w wyrażeniu, którego wywnioskowany typ musi zostać wyemitowany do pliku .d.ts. Aby obejść ten problem, potrzebna jest jawna adnotacja typu, która zwykle będzie Provider
or Provider[]
.
-
rdzeń: Minimalna obsługiwana
zone.js
wersja0.11.4
. Oznacza to, że jeśli używasz starszej wersji, nadszedł czas, aby zaktualizować zone.js w swoim projekcie! -
formy: Połączenia
emitEvent
opcja została dodana do następującychFormArray
iFormGroup
metody: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray. wyczyść
Jeśli Twoja aplikacja ma niestandardowe klasy, które rozszerzają FormArray
or FormGroup
klas i nadpisać
wyżej wymienionych metod, może być konieczne zaktualizowanie implementacji w celu uwzględnienia nowych opcji
konto i upewnij się, że nadpisania są zgodne z perspektywy typów.
- formy: Poprzednio
min
imax
atrybuty zdefiniowane na<input type="number">
zostały zignorowane przez moduł Formularzy. Teraz obecność tych atrybutów będzie
wyzwalać logikę walidacji min/maks (w przypadkuformControl
,formControlName
orngModel
dyrektywy są również obecne na danym wejściu) i
odpowiedni status kontroli formularza będzie to odzwierciedlał. - platforma-przeglądarka:
XhrFactory
został przeniesiony z@angular/common/http
do@angular/common
.
Przed
import { XhrFactory } from '@angular/common/http';
Po
import { XhrFactory } from '@angular/common';
- router: Ścisłe kontrole wartości NULL zgłoszą fragmenty, które mogą mieć wartość NULL.
Ścieżka migracji: dodaj kontrolę zerową. - router: Rodzaj
RouterLinkActive.routerLinkActiveOptions
wejście było
rozszerzony, aby umożliwić bardziej precyzyjną kontrolę. Kod, który wcześniej przeczytałem
ta właściwość może wymagać aktualizacji, aby uwzględnić nowy typ.
Zaktualizowana mapa drogowa
Zgodnie z aktualnym Angular mapa drogowazespół pracuje teraz nad następującymi ulepszeniami:
- Poprawa doświadczenia programistów podczas debugowania i profilowania. Powinno nam to pomóc w zrozumieniu struktury komponentów (wyobrażam sobie, że React Dev Tools pozwalają na React) i wykrywaniu zmian
- Poprawa czasów testów i debugowania dzięki automatycznemu wyłączaniu: Powinno to poprawić izolację między testami a czasami testów. ten Łóżko testowe zostanie również zmieniony tak, aby automatycznie czyścił i niszczył środowisko testowe po wykonaniu każdego testu
- Używanie ES2017+ jako domyślnego wyjścia: zidentyfikują przeszkody i usuną je, aby można było uaktualnić domyślny język wyjściowy
- Integracja MDC Web z materiałem Angular
- Poprawa dostępności komponentów Angular Material
- Publikowanie poradników dotyczących zaawansowanych koncepcji, takich jak wykrywanie zmian, profilowanie wydajności, interakcje z Zone.js itp.
- Aktualizacja strategii testowania e2e (por. powyżej)
- Przygotowanie aktualizacji do RxJS v7+. Jak być może wiesz, RxJS 7 został wydany niedawno. Mam nadzieję, że wkrótce będziemy mogli dokonać aktualizacji
W przyszłości zespół Angulara planuje:
- Przyjrzyj się architekturze mikrofrontendów: mogą wprowadzić środki do łatwego tworzenia mikrofrontendów za pomocą Angular
- Popraw doświadczenie programisty dzięki ścisłemu wpisywaniu formularzy Angular (tak bardzo tego potrzebujemy)
- Uczyń Zone.js opcjonalnym, co powinno uprościć framework, usprawnić debugowanie, zmniejszyć rozmiary pakietów, a nawet umożliwić korzystanie z natywnej składni async/await
- Popraw wydajność kompilacji, integrując kompilator Angular (
ngc
) jako wtyczka kompilatora TypeScript - Zezwalaj na dodawanie dyrektyw do elementów hosta. Społeczność o to prosiła od dawna!
- Spraw, aby moduły NgModules były opcjonalne, aby ułatwić krzywą uczenia się
- Zapewnij nam łatwiejsze sposoby implementacji dzielenia kodu na poziomie komponentów
Kątowy materiał i kątowy CDK
Migracja Sassa
Wewnętrznie zarówno materiał kątowy, jak i CDK przeniosły się do nowy system modułów Sass.
Jeśli Twoja aplikacja korzysta z jednego z nich, musisz się upewnić, że go zastąpiłeś node-sass
by sass
: https://www.npmjs.com/package/sass. ten node-sass
pakiet nie jest już utrzymywany!
Wraz z tą migracją interfejs API motywów Sass został ulepszony i teraz pozwala nam korzystać z funkcji Sass @use
użyteczność.
Jest teraz jeden punkt wejścia dla @angular/material
i @angular/cdk
.
Wreszcie, dla przejrzystości zmieniono również interfejsy API. Po drodze zmieniono nazwy wielu funkcji, domieszek i zmiennych.
Więcej informacji na temat tych zmian znajdziesz w nowym przewodniku po motywach: https://github.com/angular/components/blob/master/guides/theming.md. Ponadto zauważ, że przewodniki na https://material.angular.io zostały przepisane, aby zaprezentować nowe API i zawierają wyjaśnienia.
Proces aktualizacji spowoduje automatyczną migrację kodu do nowego Sass API. Przykłady można znaleźć przed/po tutaj.
Zmiany kątowe CDK
Wersja 12 zawiera szereg zmiany do Angularnego CDK.
Tutaj wymienię tylko nowe funkcje, ale możesz zapoznać się z uwagami do wydania, jeśli chcesz uzyskać szczegółowe informacje na temat poprawek błędów i ulepszeń wydajności:
- Przeciągnij i upuść: Upuszczone wydarzenie zawiera teraz
dropPoint
właściwość, określająca dokładny punkt, w który wskazywała mysz, kiedy przedmiot został upuszczony. Więcej informacji tutaj - Przeciągnij i upuść: Kontener podglądu można teraz dostosować
- Stół: Nowa dyrektywa pozwala włącz repeater widoku recyklingu, który buforuje usunięte wiersze i używa ich ponownie, gdy zestaw danych ulegnie zmianie. Może to pomóc w poprawie wydajności (zmniejszeniu opóźnień)
- Stół: W dodatku przesunięcia lepkich elementów do
StickyUpdate
Interfejs - Krokowy: Gdy użytkownik próbuje odejść od kroku, a
interacted
wydarzenie będzie teraz wydany - Krokowy: Orientacja może być teraz zmieniony
- dostępność:
FocusOptions
przedmiot można teraz przekazać na różne metody pułapek ogniskowych - Testowanie: Nowe środowisko wiązki WebDriver. Nie zagłębiłem się jeszcze w ten, więc nie mogę ci więcej powiedzieć. Sprawdzić PR
Zmiany materiału kątowego
Istnieje również pewna liczba zmiany dla materiału kątowego. Ponownie zapoznaj się z informacjami o wydaniu, aby uzyskać pełną listę poprawek błędów.
Nowe funkcje:
- Selektor dat: Już nie zależy w oknie dialogowym
- Krokowy: Orientację można teraz zmieniać dynamicznie (podobna zmiana w CDK)
- Krokowy: Zezwól na zawartość renderowane leniwie
- Menu: Zezwól na aktualizację pozycji menu programowo
- Błąd maty: Teraz używa
aria-live="polite"
zamiastrole="alert"
. Więcej szczegółów tutaj - Tabs: Dodaj metodę do programowo ustaw nacisk na konkretną kartę
- Lista: Teraz zwraca tablicę ze zmienionymi opcjami z
selectAll
ideselectAll
metody. Sprawdzić PR dla szczegółów - Przesuń przełącznik: Pozwalają na globalnie skonfiguruj domyślny kolor przez dostawcę
- Tooltip: Teraz eksponuje efektywną pozycję podpowiedzi poprzez klasę na komponencie
- radio, pole wyboru i Slider: Uwzględnij kolor tła tych komponentów w drukowanie arkuszy stylów style
Istnieje również szereg zmian w wersji eksperymentalnej: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Kątowy uniwersalny
Angular Universal 12 jest również prosto z piekarnika.
W tym wydaniu Universal teraz domyślnie wbudowany krytyczny CSS, co jest całkiem fajne.
Universal zawiera teraz nowy proxyConfig
możliwość dostarczenia niestandardowych konfiguracji proxy do ssr-dev-server
budowniczy.
W tej wersji jest nowy (eksperymentalny) silnik SSR o nazwie Koniczyna (przypomina mi o wysokiej jakości narzędziu w ekosystemie Java). Ten nowy silnik wydaje się obiecujący. Ma na celu uproszczenie rzeczy, pozbycie się Window is undefined
błąd, usuń potrzebę wielu kompilacji dla SSR/prerender, generuj powłoki aplikacji bez dodatkowej kompilacji i nie tylko. Prawdopodobnie dowiemy się o tym później. Jeśli jesteś ciekawy, sprawdź PR.
Ta wersja zawiera budowniczy które można wykorzystać do generowania stron statycznych (tj. wstępnego renderowania) przy użyciu nowego podejścia Universal Clover.
Wreszcie ta wersja zawiera również Obsługa TLS dla serwera deweloperskiego.
Mapy Google
Jak wiecie, Angular zawiera komponenty do Map Google i Youtube. Wersja 12 zawiera kilka ulepszeń komponentu Mapy Google:
- Teraz zawiera
icon
wejście do łatwego dostosowania znacznika - Teraz emituje
clusterClick
zdarzenie, gdy klaster został kliknięty - zawiera opakowanie wokół Google Maps Geocoder API i eksportu
MapDirectionsResponse
, który wcześniej nie był eksponowany - Wprowadza wsparcie dla renderowanie map ciepła
- W dodatku
MapDirectionsRenderer
, pozwalający na renderowanie wskazówek na mapie, orazMapDirectionsService
, który owijagoogle.maps.DirectionsService
do obliczenia trasy między dwoma punktami. - Nowości
options
wejście na klaster znaczników, podobnie jak w innych dyrektywach.
Aktualizacja
Jak zwykle dostępny jest kompletny przewodnik po uaktualnieniach i ng update
pomoże ci: https://update.angular.io/?l=3&v=11.0-12.0
Jeśli używasz Nrwl NX (naprawdę powinieneś), zauważ, że Nx 12.3 zawiera już wsparcie dla Angulara 12! Dowiedz się więcej na ten temat tutaj. Jako dodatkowa korzyść, Nx pomoże również w migracji z TSLint do ESLint (i już czas!)
Wnioski
W tym artykule zbadałem nowe funkcje Angular 12.
Jak zwykle to wydanie jest heroiczny (co innego mogłoby to być?! 😎).
Ivy idzie do przodu i miejmy nadzieję, że „wkrótce” będziemy mniej zirytowani ngcc
, w miarę migracji ekosystemu. W tym wydaniu wprowadzono wiele niesamowitych zmian, więc sprawdź je i zaktualizuj już teraz!.
To tyle na dziś!
PS: Jeśli chcesz dowiedzieć się mnóstwa innych fajnych rzeczy na temat tworzenia produktów/oprogramowania/stron internetowych, sprawdź Koncepcje programistyczne seria, (https://mailchi.mp/fb661753d54a/developassion-newsletter) [zapisz się do mojego newslettera] oraz przyjdź i przywitaj się na Twitterze!
- Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
- Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
- Źródło: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Zdolny
- O nas
- o tym
- powyżej
- bezwzględny
- Akceptuj
- Akceptuje
- dostęp
- dostępność
- Konto
- dokładnie
- faktycznie
- w dodatku
- dodatek
- zaawansowany
- Korzyść
- Po
- Cele
- Alarm
- algorytm
- Algorytmy
- Wszystkie kategorie
- Pozwalać
- pozwala
- sam
- już
- alternatywny
- alternatywy
- Chociaż
- zawsze
- wśród
- i
- Angular
- animacje
- ogłosił
- Zapowiedź
- Inne
- nigdzie
- api
- Pszczoła
- Aplikacja
- zjawić się
- Zastosowanie
- aplikacje
- podejście
- kwiecień
- architektura
- na około
- Szyk
- artykuł
- towary
- powiązany
- atrybuty
- Autorzy
- automatycznie
- automatycznie
- dostępność
- dostępny
- Babel
- z powrotem
- Back-end
- tło
- bar
- na podstawie
- podstawa
- bo
- zanim
- jest
- korzyści
- Ulepsz Swój
- pomiędzy
- Duży
- Najwyższa
- Bit
- Blog
- marka
- Brand New
- Przełamując
- Przynosi
- przyniósł
- przeglądarka
- przeglądarki
- Bug
- budować
- budowniczy
- Budowanie
- Buduje
- wbudowany
- Zapakować
- ciężar
- nazywa
- powołanie
- możliwości
- walizka
- Etui
- Spowodować
- powodowany
- zmiana
- Zmiany
- ZOBACZ
- Wykrywanie urządzeń szpiegujących
- Chrom
- klarowność
- klasa
- Klasy
- jasny
- wyraźnie
- Zamyka
- Grupa
- kod
- Zbieranie
- kolor
- przyjście
- komentarze
- społeczność
- zgodność
- zgodny
- kompletny
- skomplikowane
- składnik
- składniki
- Koncepcje
- zaniepokojony
- konkluzja
- połączony
- rozważa
- zgodny
- stały
- konsumować
- Pojemnik
- zawartość
- kontekst
- kontynuować
- kontrola
- kontroler
- kontroli
- Chłodny
- rdzeń
- odpowiada
- Koszty:
- mógłby
- kurs
- pokrywa
- pokryty
- Stwórz
- stworzony
- Tworzenie
- tworzenie
- krytyczny
- przeglądarka
- istotny
- CSS
- ciekawy
- Aktualny
- Obecnie
- zwyczaj
- właściwości niestandardowe
- dostosować
- Data
- dzień
- Dni
- martwy
- sprawa
- głębiej
- Domyślnie
- zależy
- wdrażanie
- głębokość
- detal
- detale
- Wykrywanie
- określa
- określaniu
- dev
- Deweloper
- oprogramowania
- ZROBIŁ
- różne
- KOPAĆ
- Dyrektywy
- bezpośrednio
- dystrybuowane
- Dystrybucje
- robi
- DOM
- na dół
- pobieranie
- minusem
- porzucone
- Krople
- duplikaty
- podczas
- każdy
- łatwiej
- z łatwością
- Ekosystem
- Efektywne
- wysiłek
- bądź
- Elementy
- osadzone
- umożliwiać
- Umożliwia
- obudowane
- koniec końców
- energia
- silnik
- wzmocnione
- dość
- zapewnić
- wejście
- Środowisko
- środowiska
- błąd
- Błędy
- szczególnie
- itp
- Eter (ETH)
- oceniać
- Parzyste
- wydarzenie
- wydarzenia
- wszyscy
- wszystko
- ewoluowały
- ewoluuje
- przykład
- przykłady
- doskonała
- wyjątek
- wykonać
- egzekucja
- Przede wszystkim system został opracowany
- rozszerzony
- spodziewany
- doświadczenie
- Wyjaśniać
- wyjaśnione
- wyjaśniając
- Objaśnia
- wyjaśnienie
- zbadane
- badacz
- eksport
- narażony
- wyrażeń
- rozciągać się
- rozbudowa
- zewnętrzny
- dodatkowy
- ułatwiać
- FAIL
- dość
- Spadać
- wentylator
- FAST
- szybciej
- strach
- Cecha
- Korzyści
- Federacja
- informacja zwrotna
- kilka
- pole
- Łąka
- filet
- Akta
- W końcu
- Znajdź
- znalezieniu
- natura
- Fix
- pływ
- Skupiać
- koncentruje
- następujący
- wytrzymałość
- Nasz formularz
- format
- formularze
- Naprzód
- znaleziono
- Fundamenty
- frakcja
- FRAME
- Framework
- od
- frontend
- pełny
- funkcjonować
- Funkcje
- dalej
- przyszłość
- Generować
- generuje
- generujący
- otrzymać
- GitHub
- Dać
- dany
- daje
- Dający
- Go
- będzie
- dobry
- Google Chrome
- mapy Google
- wykres
- wspaniały
- poprowadzi
- Przewodniki
- uchwyt
- Ciężko
- mający
- wysłuchany
- pomoc
- tutaj
- hi
- Wysoki
- Atrakcja
- historia
- Haczyki
- Ufnie
- gospodarz
- W jaki sposób
- HTML
- HTTPS
- olbrzymi
- czytelne dla człowieka
- CHORY
- pomysł
- zidentyfikowane
- zidentyfikować
- Rezultat
- wdrożenia
- realizacja
- realizowane
- importować
- ważny
- import
- podnieść
- ulepszony
- poprawa
- ulepszenia
- in
- zawierać
- włączony
- obejmuje
- niepoprawnie
- wskazuje
- pośrednio
- Informacje
- Informacja
- początkowo
- Innowacyjny
- wkład
- spostrzeżenia
- zainstalować
- Instalacja
- przykład
- zamiast
- instrukcje
- integrować
- Integracja
- integracja
- Interakcje
- ciekawy
- Interfejs
- wewnętrzny
- Internet
- przedstawiać
- wprowadzono
- Przedstawia
- wprowadzenie
- intuicyjny
- zainwestowany
- izolacja
- problemy
- IT
- Java
- JIT
- Praca
- przystąpić
- json
- Trzymać
- Uprzejmy
- Wiedzieć
- język
- większe
- Nazwisko
- Utajenie
- firmy
- Liga
- przeciec
- UCZYĆ SIĘ
- nauka
- Dziedzictwo
- poziom
- Dźwignia
- biblioteki
- Biblioteka
- Linia
- LINK
- powiązany
- Lista
- lokalizacja
- długo
- długi czas
- długoterminowy
- dłużej
- Popatrz
- wyglądał
- poszukuje
- Partia
- niski
- zrobiony
- utrzymać
- utrzymuje
- poważny
- Większość
- robić
- WYKONUJE
- Dokonywanie
- wiele
- mapa
- Mapy
- Mecz
- dopasowywanie
- materiał
- Matrix
- max
- znaczy
- Pamięć
- Menu
- Łączyć
- wiadomość
- wiadomości
- Metadane
- metoda
- metody
- Microsoft
- może
- migrować
- migracja
- minimum
- moll
- brakujący
- błąd
- Moda
- Nowoczesne technologie
- moduł
- Moduły
- jeszcze
- większość
- ruch
- przeniesienie
- Mozilla
- wielokrotność
- O imieniu
- mianowicie
- Nazwy
- rodzimy
- Nawigacja
- niezbędny
- Potrzebować
- wymagania
- ujemny
- netto
- Nowości
- Nowe funkcje
- aktualności
- Newsletter
- Następny
- Next.js
- węzeł
- node.js
- węzły
- Uwagi
- godny uwagi
- Powiadomienia
- numer
- z naszej
- przedmiot
- oczywista
- miejsce
- październik
- urzędnik
- Oficjalnie
- Stary
- ONE
- operator
- Option
- Opcje
- zamówienie
- organizacji
- pierwotnie
- Inne
- Wyloty
- zewnętrzne
- przegląd
- własny
- pakiet
- Pakiety
- parametr
- parametry
- szczególnie
- strony
- minęło
- Przechodzący
- ścieżka
- wykonać
- jest gwarancją najlepszej jakości, które mogą dostarczyć Ci Twoje monitory,
- spektakle
- wykonywania
- perspektywa
- kawałek
- rurociąg
- Miejsce
- plany
- plato
- Analiza danych Platona
- PlatoDane
- wtyczka
- punkt
- popularność
- position
- możliwy
- Post
- potencjalnie
- mocny
- precyzyjnie
- woleć
- obecność
- teraźniejszość
- bardzo
- zapobiec
- Podgląd
- poprzedni
- poprzednio
- Wcześniejszy
- prawdopodobnie
- problemy
- wygląda tak
- przetwarzanie
- Produkcja
- Profilowanie
- Program
- projekt
- projektowanie
- obiecujący
- właściwy
- niska zabudowa
- własność
- zapewniać
- pod warunkiem,
- zapewnia
- pełnomocnik
- opublikowany
- Naciskać
- puzzle
- jakość
- Szybki
- wychowywanie
- zasięg
- Surowy
- RE
- React
- Czytaj
- zrealizowanie
- powód
- Przyczyny
- polecający
- rekord
- zmniejszyć
- odzwierciedlić
- rejestracji
- związane z
- zwolnić
- wydany
- zdalny
- usunąć
- Usunięto
- wykonanie
- WIELOKROTNIE
- otrzymuje
- raport
- zażądać
- wywołań
- wymagać
- wymagany
- sprężysty
- odpowiedź
- REST
- dalsze
- Efekt
- powrót
- powrót
- powraca
- Pozbyć się
- blokady dróg
- Rola
- korzeń
- Trasa
- Router
- Zasada
- reguły
- run
- bieganie
- "bezpiecznym"
- taki sam
- sass
- Zapisz
- scenariusze
- zakres
- druga
- wydaje
- rozsądek
- Serie
- usługa
- Sesja
- zestaw
- ustawienie
- ustawienie
- Shadow
- Short
- powinien
- prezentacja
- Podpisy
- podobny
- Prosty
- upraszczać
- ponieważ
- pojedynczy
- sytuacja
- Rozmiar
- rozmiary
- Powoli
- mały
- mniejszy
- So
- dotychczas
- rozwiązanie
- Rozwiązania
- kilka
- coś
- Dźwięk
- Źródło
- Typ przestrzeni
- specyficzny
- stabilny
- stoisko
- standard
- standardy
- początek
- Startowy
- Rynek
- pobyt
- Ewolucja krok po kroku
- Nadal
- Stop
- sklep
- przechowywany
- Historia
- Strategia
- rygorystyczny
- surowsze
- Struktura
- styl
- subskrybuj
- taki
- Wspaniały
- wsparcie
- Utrzymany
- podpory
- niespodzianek
- Przełącznik
- system
- Tailwind
- wiatr w tył
- Brać
- trwa
- biorąc
- cel
- zespół
- Zespoły
- szablon
- Szablony
- test
- Testowanie
- Testy
- Połączenia
- Źródło
- ich
- rzecz
- rzeczy
- w tym roku
- Przez
- czas
- czasochłonne
- Oś czasu
- czasy
- do
- razem
- żeton
- Tona
- Ton
- także
- narzędzie
- narzędzia
- najwyższy poziom
- w kierunku
- wyśledzić
- Rysunek kalkowy
- śledzić
- Śledzenie
- Przekształcać
- przejście
- Tłumaczenie
- przezroczysty
- wyzwalać
- prawdziwy
- typy
- Maszynopis
- zazwyczaj
- dla
- zrozumieć
- uniwersalny
- nieużywana
- zbliżających
- Aktualizacja
- zaktualizowane
- Nowości
- aktualizowanie
- uaktualnienie
- URL
- us
- Stosowanie
- posługiwać się
- Użytkownik
- Użytkownicy
- Użytkowe
- użyteczność
- uprawomocnienie
- walidatory
- Cenny
- wartość
- Wartości
- różnorodny
- Ve
- wersja
- Zobacz i wysłuchaj
- W3
- czekać
- poszukiwany
- ostrzeżenie
- sieć
- Webpack
- tydzień
- tygodni
- powitanie
- Co
- czy
- który
- Podczas
- KIM
- będzie
- w ciągu
- bez
- Wygrał
- wspaniale
- Praca
- pracował
- pracujący
- by
- napisać
- pisanie
- napisany
- X
- rok
- Twój
- youtube
- zefirnet