Aktualizacja aplikacji korporacyjnej do Angular 16
Jestem absolutnie kupiony przez wszystkie nowe funkcje Angular v16 , zaczynając od sygnałów i cóż, wszystko inne. I po prostu nie mogłem się oprzeć pokusie zaktualizowania jednej z aplikacji firmy, aby zobaczyć, jakie to może być trudne.
Jest krawędź natarcia i krawędź krwawienia. Możesz wybrać prowadzenie lub krwawienie, to twój wybór bólu.
Wszyscy ( prawie ) mówią o Angular 16. Hype czy nie, najprawdopodobniej już o tym czytałeś:
- granulowana reaktywność (sygnały)
- wymagane @Inputs()
- parametry zapytania, danych i resolwera jako Inputs()
- subskrypcje, które można zniszczyć
- dane wejściowe na ngComponentOutlets
- Vite dla serwera deweloperskiego
- nawilżenie SSR
- sygnały, sygnały, sygnały…
Gdzie tkwi haczyk w istniejącej aplikacji korporacyjnej?
Obsługiwany jest tylko Ivy.
A ból?
Starsze biblioteki…
Kto jest winny?
Tak ! trudne pytanie. Ale to mieszanka obowiązków.
- Programiści bibliotek Angular . Wymienię tylko kilka bibliotek: custom-validators , text-mask , stare wersje for formly , ng-bootstrap , nebular (więcej o starych wersjach wkrótce). Żaden nie jest odpowiednio zaktualizowany, aby używać najnowszej lub przynajmniej obsługiwanej wersji Angular. Niektóre są wyraźnie opuszczone. Bluszcz nie jest obsługiwany.
- Deweloperzy firmy . Ok, wiem, że nie jest łatwo aktualizować wszystkie zależności, trudniej to osiągnąć, jeśli „ kod już działa, nie ma potrzeby aktualizacji ”. Już przeszedłem przez ten ból podczas aktualizacji do Angular 15; niektóre ciężkie i źle dostosowane komponenty Angular Material nadal hałasują w naszym kodzie (nie wiem, ile czasu wytrzymają moduły
LegacyMaterialXXX
). - Zespół Angular( ?) Możemy się spierać na ten temat, ale w przypadku MHO pytanie powinno brzmieć „ czy Angular 16 ma na celu aktualizację istniejących aplikacji korporacyjnych, czy tylko tworzenie nowych aplikacji od zera? ”.
Ten komentarz nie jest ładny ( z numeru: Alternatywny sposób kompilacji bibliotek innych niż bluszcz po usunięciu ngcc w wersji 16 # 24797) :
Chodzi mi o to, że dość duża baza kodu, która przeciąga niektóre (wiele) „ już działających w ten sposób ” komponentów, które opierają się na porzuconych bibliotekach, nie jest łatwa do aktualizacji. Może to również oznaczać zupełnie nowy projekt (czas programisty), i po co? tak kątowy ≤ 17 znów wszystko psuje? trudna decyzja. „ Może powinniśmy byli zostać przy Angular 9… ”
Jeśli ktoś zmagał się z aktualizacją Bootstrap (nie ng-bootstrap ) z wersji 4 na 5, możesz mieć małe pojęcie, większość rzeczy nadal działała i wyglądała prawie (prawie) tak samo, ale jednocześnie wiele rzeczy, które kiedyś działały ( lub ładnie wyglądać na standardach Bootstrap) zakończyło się zepsuciem.
Wyobraź sobie bazę kodu, która w dużej mierze opiera się na starych stylach Bootstrap, mocno dostosowanych i słabo rozwiniętych komponentach Angular Material, wielu nieobsługiwanych dyrektywach i bibliotekach do obsługi, od animacji po walidacje formularzy.
Aktualizacja do dowolnej wersji frameworka, która promuje lepszy sposób na ehm…, wszystko (?) nie będzie łatwym zadaniem.
Stare wersje, dlaczego?
Podczas pracy nad projektem możesz stanąć przed następującą decyzją:
Czy musimy używać frameworka interfejsu użytkownika? czy też trzymamy się ręcznie kodowanych komponentów ad-hok stylizowanych przy użyciu zwykłego CSS?
Wybierz swoją truciznę:
- Materiał
- Bootstrap
- Mgławica
- Wiatr w plecy
- jak to nazwiesz, mamy nieskończone możliwości wyboru
Ulepszający ból jest nieunikniony.
Nalegałem na moją próbę aktualizacji. Jak trudne może to być?
Tak więc, aby uzyskać działającą aplikację bez błędów kompilacji (ignorując uszkodzenia wizualne), zaktualizowałem większość bibliotek, które można było zaktualizować. Spróbowałem jeszcze raz i jeszcze raz… spłucz i powtórz…
Główny problem polega na tym, że możesz mieć wiele przestarzałych, porzuconych lub nieobsługiwanych bibliotek, w których działający kod NADAL DZIAŁA! Jedynym problemem jest to, że zależności Angular w tych bibliotekach są przestarzałe.
np. jedną z tego rodzaju bibliotek w projekcie, nad którym pracuję, jest text-mask , biblioteka sprzed 5 lat. I chociaż jest to biblioteka niezarządzana, kod nadal działa. Migracja do innej biblioteki wymagałaby czasu programisty + czasu na testowanie, wszystko nadal działa jak wcześniej.
Skopiowałem i wkleiłem główny kod biblioteki tak, jakby to była wewnętrzna biblioteka w projekcie, dokonałem kilku poprawek, et voila , nadal działa, kod nie jest zły, zależności między bibliotekami są „ złe ”. Niemniej jednak, jeśli używasz oryginalnej biblioteki, Angular 16 zgłasza błąd „ Biblioteka nie obsługuje Ivy ”.
Jak dotąd w tym projekcie jest tak wiele starych, przestarzałych, nieobsługiwanych i porzuconych zależności, że aktualizacja może sama w sobie stać się zupełnie innym projektem. Przestałem próbować aktualizować po zauważeniu, że jest zbyt wiele zmian do zrobienia, aby uzyskać czystą wersję.
Czy można zaktualizować korporacyjną aplikację Angular do Angular 16?
Jest to możliwe, ale jeśli aplikacja jest złożona lub ma dużo, powiedzmy „ jeszcze nieobsługiwanych przez biblioteki Angulara 16 ”, może nie być to takie proste.
Przygotuj się na rozpoczęcie od przeprowadzenia wielu testów kompilacji w celu określenia, które biblioteki wymagają aktualizacji wersji, a które mogą wymagać specjalnego traktowania (takiego jak wyodrębnienie działającego kodu i zbudowanie wewnętrznej wersji tej biblioteki).
Następnie, jeśli uda ci się uzyskać czystą kompilację, prawdopodobnie będziesz musiał sprawdzić wszystkie style wizualne dla każdego komponentu (na wypadek, gdyby coś było wizualnie zepsute).
Ulepszenie jest prawdopodobne (bardziej niż możliwe), ale nie będzie to „ bezbłędne zwycięstwo ”.
Właściwie zaktualizowałem aplikację Angular do Angular 16.
Nie jest to aplikacja korporacyjna, nie ma żadnych zewnętrznych zależności innych niż sam Tailwind i Angular, więc jest tak prosta, że aktualizacja była prawie bezpośrednim zadaniem.
W prawdziwych aplikacjach korporacyjnych nie oczekuj szczęśliwej ścieżki ani szczęśliwego zakończenia. Niepowodzenie w tym zadaniu ma duże prawdopodobieństwo.
I nie chodzi o to, że nie przepadam za Angular 16, naprawdę uwielbiam wszystkie ogłoszone funkcje, ale aktualizacja do właśnie wydanej wersji BĘDZIE BOLEM!
Wcześni użytkownicy : Uwaga!