Angular 10 – co musisz o nim wiedzieć

Angular niedawno wydało nową wersję 24 czerwca 2020 r. Zostało wprowadzone dopiero po 4 miesiącach od wydania wersji 9.0 Angulara. Najnowsza wersja Angular 10 jest wersją beta – co oznacza, że ​​zespół Angulara zbliża się do ostatecznego wydania najnowszej wersji tego opracowanego przez Google frameworka zorientowanego na maszynopis.

Jeśli jesteś programistą internetowym lub kimś, kto chce opracować aplikację internetową dla swojej firmy, musisz wiedzieć, co ma do zaoferowania ta nowa wersja. Ponieważ wersja beta jest wprowadzana w ciągu 4 miesięcy od wydania ostatniej wersji, możesz się zastanawiać, czy to strzał w dziesiątkę! Jesteśmy tutaj, aby pomóc Ci znaleźć odpowiedź. Przyjrzyjmy się bliżej kluczowym cechom Angulara 10.

Cechy kątowego 10

Chociaż zespół Angulara utrzymywał, że najnowsza wersja skupi się głównie na narzędziach wysokiej jakości i ekosystemie, zamiast wprowadzać mnóstwo nowych funkcji, przeprowadziliśmy obszerne badanie i dostarczyliśmy Ci wyczerpującą listę wartościowych ofert, których możesz oczekiwać od wersji . Sprawdźmy to.

• Nowy selektor zakresu dat

Biblioteka komponentów interfejsu użytkownika materiałów kątowych jest teraz wyposażona w nowy selektor zakresu dat. Nie wiesz, co to jest? Do stron internetowych można dołączyć selektor zakresu dat. Wyświetla kalendarze do wybierania godzin, dat lub dowolnego predefiniowanego okresu, takiego jak „ostatnie 20 dni”.

Jeśli chcesz, aby użytkownicy wybierali zakres dat, a nie tylko jedną datę, możesz użyć składników mat-date-range-picker i mat-date-range-input.

• Opcjonalne bardziej rygorystyczne ustawienia

Angular 10 ma bardziej rygorystyczną konfigurację projektu podczas tworzenia nowego obszaru roboczego z ng new. Po włączeniu tej flagi wprowadzi ona do projektu kilka nowych ustawień, takich jak poprawa łatwości konserwacji, umożliwienie CLI przeprowadzenia zaawansowanej optymalizacji w aplikacji, pomoc w wyłapywaniu błędów z wyprzedzeniem i tak dalej.

Oto podstawowy zakres pracy flagi ścisłej:

-Zmiana sprawdzania typu szablonu na Ścisły
-Włączanie strict więcej w TypeScript
-Konfigurowanie reguł lintingu, aby zapobiec użyciu „any” jako deklaracji typu
-Zmniejszenie domyślnych budżetów pakietów

• Ostrzeżenia dotyczące importu CommonJS

Korzystanie z zależności spakowanej za pomocą CommonJS powoduje, że pakiety są duże, a tym samym spowalniają aplikację. Angular 10 ostrzega programistów, gdy kompilacja wciągnie jeden z takich pakietów. W ten sposób mogą poinformować swoje zależności, że preferują pakiet modułu ECMAScript (ESM).

• Aktualizacje

W zależnościach Angulara wprowadzono kilka głównych aktualizacji, aby zsynchronizować się z ekosystemem JavaScript. Są to następujące:

-TypeScript został zaktualizowany do wersji TypeScript 3.9. Pomaga zespołowi pracować nad poprawą wydajności i stabilności.
-TSLint jest aktualizowany do v6
-TSLib jest aktualizowany do wersji 2.0

Zaktualizowano również układ projektu. W związku z tym można zobaczyć nowy plik tsconfig.base.json w Angular 10. Ten plik lepiej obsługuje IDE, typ rozpoznawania narzędzia do budowania i konfiguracje pakietów.

Poza tym najnowsza wersja Angular umożliwia takie rzeczy, jak przyspieszenie kompilatora, edytowanie, szybkie poprawki i uzupełnianie.

• Poprawiona wydajność ngcc

Ta funkcja Angular 10 promuje wdrożenie opartej na programie wyszukiwarki punktów wejścia. Może to przetwarzać punkty wejścia, do których mogą dotrzeć tylko programy zdefiniowane w pliku tsconfig.json. Co więcej, zależności są ukryte w wystawie punktu wejścia i można je odczytać bez obliczania za każdym razem.

Ścieżka podstawowa każdego pakietu wraz z punktami wejścia nie musi być przechowywana w pliku. Dlatego aplikacje nie muszą przechowywać niepotrzebnych pustych tablic. Ta funkcja pomaga zamanifestować i zmniejszyć rozmiar pliku w punkcie wejścia, nawet w przypadku modułów z dużymi węzłami. To znacznie zwiększa wydajność.

• Scalanie wielu plików

Najnowsza wersja Angular obsługuje łączenie wielu dokumentów tłumaczeniowych bez żadnych kłopotów. W poprzednich wersjach mogły ładować tylko jeden plik. Teraz użytkownicy mogą określić wiele dokumentów na język, a transakcje ze wszystkich plików można połączyć za pomocą identyfikatora wiadomości. Najistotniejszy dokument zostanie umieszczony na pierwszym miejscu, a później tłumaczenia awaryjne.

• Limit czasu blokowania asynchronicznego

Kolejną interesującą rzeczą w Angular 10 jest to, że limit czasu blokowania Async jest skonfigurowany w tej wersji. Obsługuje to plik ngcc.config.js w celu dostosowania opóźnień ponownych prób i prób ponownych prób w AsyncLocker. Test integracyjny umożliwia programistom monitorowanie limitu czasu, użycie pliku ngcc.config.js w celu skrócenia limitu czasu i zapobieżenia zbyt długiemu testowi. Nic dziwnego, że profesjonaliści z firm tworzących aplikacje internetowe witają najnowszą wersję Angulara z ogromną ulgą!

• Router

Strażnik CanLoad może wrócić do UrlTree w najnowszej wersji Angular. Strażnik CanLoad zwracający UrlTree unieważnia wszelkie najnowocześniejsze nawigacje, a co za tym idzie, pomaga przekierowywać. Dopasowuje to bieżące zachowanie do dostępnych strażników CanActivate – są one również dodawane tutaj. Nie ma to jednak żadnego wpływu na wstępne ładowanie.

• Skompilować

Z wyprzedzeniem (AOT) kompiluje aplikację i jej biblioteki w czasie kompilacji. Jest to powszechna praktyka od czasów Angulara 9. Może konwertować kody w czasie kompilacji, jeszcze zanim przeglądarka pobierze, a następnie uruchomi ten kod. Oczywiście zapewnia to szybsze renderowanie w przeglądarce. Kompilator eliminuje oddzielne żądania AJAX dotyczące plików źródłowych, umieszczając zewnętrzne szablony HTML i arkusze stylów CSS w aplikacji JavaScript.

W AOT w Angular 10 wprowadzono kilka ewidentnych zmian:

1. Jego przyrostowa kompilacja pomaga osiągnąć lepsze czasy kompilacji
2. Dzięki wygenerowanemu kodowi, który jest wysoce kompatybilny z drżeniem drzewa, może osiągnąć lepsze rozmiary kompilacji
3. Wersja umożliwia odkrywanie kilku nowych funkcji, takich jak leniwe ładowanie komponentu zamiast modułów, metaprogramowanie lub komponenty wyższego rzędu, najnowszy system wykrywania zmian, który nie jest oparty na Zone.js itp.

• Usterka naprawiona

W tej wersji wprowadzono wiele poprawek. Obejmują one usuwanie wszelkich nieadresowanych wystąpień zakresu w kompilatorze, rozwiązywanie błędów związanych z migracją podczas importowania nieistniejącego symbolu, identyfikowanie modułów, których dotyczą nadpisania w TestBed i inne. Co więcej, w rdzeniu jest również obejście problemu, aby naprawić błąd Terser Inlining.

• Lepsze zaangażowanie społeczności

Angular ma już dużą globalną społeczność programistów, którzy konsekwentnie zapewniają wartościowe oferty dla projektów Angular w całym spektrum. Ostatnio sama organizacja planuje przyjąć strategie i dokonać inwestycji, aby wzmocnić społeczność i ulepszyć platformę.

• Wycofanie i usunięcia

Angular Package Format nie obejmuje już pakietów FESM5 ani ESM5. Pozwala to zaoszczędzić 119 MB czasu pobierania i instalacji podczas uruchamiania instalacji przędzy lub npm w bibliotekach i pakietach Angular. Te formaty można odrzucić, ponieważ wszelkie obniżanie poziomu w celu wsparcia ES5 jest przeprowadzane pod koniec procesu rozwoju.

Ponadto organizacja Angular wycofała wszelkie wsparcie dla starszych przeglądarek, takich jak IE9, 10 i Internet Explorer Mobile.

• Inne zmiany

Angular 10 wprowadza kilka przełomowych zmian. Na przykład, Logic jest aktualizowana zgodnie z formatowaniem okresów dziennych, które wykraczają poza północ. Jeśli aplikacja używa formatu formatDate lub DatePipe lub nawet kodów formatu b i B, ta zmiana będzie miała na nią wpływ.

Kolejną zmianą jest to, że każdy przelicznik, który zwraca EMPTY, anuluje nawigację. Deweloperzy muszą zaktualizować przeliczniki o określoną wartość, taką jak default!Empty.

Angular NPM nie zawiera kilku komentarzy jsdoc do obsługi zaawansowanych optymalizacji kompilatora zamknięć. Ci, którzy używają Closure Compiler, powinni lepiej korzystać z pakietów Angular zbudowanych bezpośrednio ze źródeł, niż z wersji opublikowanych na NPM. Przez pewien czas użytkownicy mogą korzystać z bieżącego potoku kompilacji.

W tej wersji nagłówki Vary są pomijane podczas pobierania źródeł z pamięci podręcznych ServiceWorker. Powoduje to pobranie źródeł, nawet jeśli ich nagłówki nie są podobne. Jeśli aplikacja musi rozróżniać swoje odpowiedzi na podstawie nagłówków żądań, upewnij się, że Angular ServiceWorker jest skonfigurowany tak, aby uniknąć buforowania dowolnego zasobu, którego dotyczy problem.

Ostrzeżenia o wszelkich nieznanych elementach są teraz odnotowywane jako błędy. Nie spowoduje to uszkodzenia aplikacji, ale może uruchomić narzędzia, które oczekują, że zostaną zarejestrowane przez plik console.error.

Jak zaktualizować do Angular 10

Aby zaktualizować do najnowszej wersji Angulara, możesz użyć następującego polecenia:

ng aktualizacja @angular/cli @angular/core

Oto ostateczne wytyczne dotyczące aktualizacji do wersji Angular 10. Jednak bez wiedzy technicznej polecenie może nie być przydatne. Skorzystaj z profesjonalnych usług programistycznych Angular, aby pomyślnie zaktualizować do wersji Angular 10.

Wniosek
Cała wygoda oferowana przez Angular 10 być może przekonała Cię do uaktualnienia wersji frameworka aplikacji. Zaufaj nam, to się opłaca.