Angular 11 – wszystko, co musisz wiedzieć

Opublikowany: 2021-03-31

Wersja Angular 11 jest tutaj i przyniosła programistom kilka świetnych aktualizacji. Od frameworka po komponenty i CLI – wszystko jest aktualizowane. Zespół Angulara stara się wprowadzać kilka poważnych zmian z każdą aktualizacją. Na przykład, iVY został wydany w Angular 9, wsparcie dla Typescript 3.8 zostało zapewnione w Angular 9.1, a modyfikacje w bibliotece komponentów interfejsu użytkownika Angular Material zostały wprowadzone w Angular 10. Dzisiaj zajmiemy się funkcjami Angular 11. Zanurzmy się w następnie.

Angular 11 – funkcje i aktualizacje

Najważniejszym punktem tej wersji są bardziej rygorystyczne typy, automatyczne wstawianie czcionek i ulepszenia wydajności routera. W zaktualizowanych aplikacjach zostanie włączone domyślne automatyczne podstawianie czcionek. Ulepszona wydajność routera zapewnia szybsze tworzenie aplikacji. Poza tym Angular 11 ma jeszcze więcej, które wymienimy poniżej.

#Kompletowe uprzęże testowe

W Angular w wersji 9 społeczność wprowadziła wiązki testowe komponentów. Zapewniły one solidną powierzchnię API, która pomaga w testowaniu komponentów Angular Material. Pozwala programiście na interakcję z komponentami za pomocą obsługiwanego interfejsu API.

W wersji 11 dla każdego komponentu dostępna jest wiązka komponentów. Zawiera wiele ulepszeń wydajności, aktualizacji, a nawet nowych interfejsów API. Teraz funkcja równoległa ułatwia radzenie sobie z akcjami asynchronicznymi w testach, ponieważ programiści mogą równolegle uruchamiać wiele interakcji asynchronicznych z komponentami. Na przykład funkcja ręcznego wykrywania zmian zapewni dostęp do lepszej kontroli wykrywania, po prostu wyłączając automatyczne wykrywanie zmian w testach jednostkowych.

# Zaktualizowana obsługa wymiany gorącego modułu

Hot Module Replacement lub HMR to mechanizm pozwalający na wymianę modułów bez odświeżania pełnej przeglądarki. To stara koncepcja, ale Angular 11 dodaje do niej więcej.

Angular 11 oferuje wsparcie dla HMR z wymaganymi zmianami kodu i konfiguracjami. Pozwala CLI na włączenie HMR podczas inicjowania aplikacji z serwerem ng. Następujące polecenie jest wymagane do rozpoczęcia pracy z:

 ng służyć –hmr

W ten sposób polecenie CLI znacznie zmniejsza nakład pracy wymagany do skonfigurowania HMR. Gdy programiści wstawią to polecenie, konsola wyświetli komunikat, gdy tylko lokalny serwer potwierdzi, że HMR jest aktywny.

Podczas tworzenia najnowsze zmiany w szablonach, stylach i komponentach zostaną automatycznie zaktualizowane do działającej aplikacji. Nie wymaga pełnego odświeżania strony, co z kolei zwiększa produktywność programistów.

#Zaktualizowany podgląd usługi językowej

Usługa Angular Language Service oferuje różne pomocne narzędzia, które według profesjonalistów z każdej firmy zajmującej się tworzeniem stron internetowych zapewniają bezproblemowe tworzenie stron internetowych. Zaktualizowana usługa językowa zapewni programistom dokładniejsze wrażenia. Mogą sprawdzić, jak będzie działać z lepszym rendererem i silnikiem widoku. Usługa językowa będzie mogła poprawnie wywnioskować typy ogólne w szablonach, tak jak robi to kompilator TypeScript.

#Automatyczne wstawianie czcionek

Angular 11 oferuje automatyczne wstawianie czcionek, które pomaga konwertować ikony i czcionki Google na wbudowane w indeksie HTML. Podczas kompilacji Angular CLI pobierze, a następnie osadza czcionki wbudowane, które są połączone i używane w aplikacji. Są one domyślnie włączone do konfiguracji.

Jest to ustawione domyślnie w aplikacjach zbudowanych w wersji 11. Dlatego, aby wykorzystać zalety tej optymalizacji, programiści muszą najpierw zaktualizować aplikację.

#Wsparcie dla pakietu internetowego 5

Webpack służy do kompilowania wielu plików w jeden mały plik lub pakiet. Jego najnowsza wersja – Webpack 5 została wydana kilka miesięcy temu.

Angular 11 oferuje eksperymentalne wsparcie dla webpacka 5, a programiści mogą go używać do wypróbowywania nowych rzeczy. Zespół Angulara może rozszerzyć wsparcie eksperymentalne, aby uzyskać mniejsze pakiety i szybsze kompilacje, gdy webpack stanie się bardziej stabilny.

Oto polecenie do korzystania z webpacka 5. Dodaj następujące wiersze do pliku package.json:

"postanowienia": {
 „pakiet internetowy”: „5.4.0”
 }

#Przejdź do ESLint

TSLint jest jednym z najpopularniejszych narzędzi do tworzenia list używanych i polecanych przez dostawców usług programistycznych Angular. Od niedawna obowiązek ten zostaje przekazany ESLint.

W przypadku Angular 11, Codelyzer i TSLint są oficjalnie przestarzałe i zostaną usunięte w przyszłych wersjach. Najnowsza wersja wprowadziła 3-etapową metodę migracji z TSLint do ESLint:

Krok 1 – Uruchom ng add @angular-eslint/schematics
Krok 2 – Teraz uruchom polecenie ng g @angular/schematics:convert-tslint-to-eslint {{NAZWA TWOJEGO PROJEKTU}}
Krok 3 – Usuń plik tslint.json na poziomie głównym.

#Szybsze kompilacje

Angular 11 przynosi radykalną poprawę prędkości. Proces aktualizacji NGCC jest teraz 2-4x szybszy niż wcześniej. Dlatego programiści nie muszą długo czekać na ukończenie kompilacji i przebudowy.

#Obsługa TypeScript 4.0

Angular 11 obsługuje TypeScript 4.0. Wsparcie dla TypeScript 3.9 zostało teraz porzucone. Jednym z głównych powodów takiego stanu rzeczy jest zwiększenie szybkości kompilacji. Najnowsza wersja zapewnia szybsze i płynniejsze kompilacje niż poprzednie wersje.

#Lepsze rejestrowanie i raportowanie

Najnowsza wersja Angulara wprowadziła różne zmiany w raportowaniu fazy konstruktora, które czynią ją bardziej pomocną podczas tworzenia. Dane wyjściowe CLI zawierają bardziej przyjazne dla użytkownika i czytelne informacje.

#Inne zmiany

Oprócz wyżej wymienionych, najnowsza wersja Angulara wprowadza kilka innych zmian, takich jak:

  • Usprawnienia pracownika serwisu
  • Nowe zautomatyzowane schematy i migracje
  • Obsługa leniwego ładowania dla różnych nazwanych placówek
  • Obsługa przeglądarki Internet Explorer 9,10 i IE mobile została całkowicie usunięta
  • ReserveQueryParams jest usuwane z routera. Zamiast tego programiści mogą użyć queryParamsHandling=”preserve”
  • Bardziej rygorystyczne typy są teraz wbudowane w rury
  • Angular CLI może generować strażników rozwiązania
  • Funkcja formatDate obsługuje formatowanie roku numeracji tygodni ISO 8601
  • Wyrażenia w OIOM są teraz ponownie sprawdzane pod względem typu
  • Potok asynchroniczny nie zwraca już undefined dla żadnych danych wejściowych, które zostały wpisane jako undefined.

Jak zaktualizować do Angular 11

Możesz zatrudnić programistów Angular, aby zaktualizowali Twoją aplikację do Angular 11. Programiści muszą uruchomić następujące polecenie:

ng aktualizacja @angular/cli @angular/core

Czy artykuł był przydatny? Podziel się ze znajomymi i daj im znać o Angular 11.