Migracja do Angular4

Nowy Angular żyje i ma się nad wyraz dobrze. Efektem było wypuszczenie nieco ponad miesiąc temu wersji 4.0.0, z kolei zaledwie przedwczoraj wyszła wersja 4.1.0. W tym wpisie omówimy po krótce nową wersję oraz przeprowadzimy migrację z wersji Angular2 do Angular4.

Angular4 – co nowego?

Mniej znaczy szybciej

Projektanci frameworka postawili sobie za cel przyspieszenie oraz zredukowanie kodu wynikowego Angular4. Jak możemy przeczytać na oficjalnym blogu:

These changes reduce the size of the generated code for your components by around 60%  in most cases (..) During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes

Animacje zostały wyciągnięte z @angular/core i umieszczone w osobnym pakiecie. By wykorzystać teraz animations, trzeba zaimportować paczkę BrowserAnimationsModule z pakietu @angular/platform-browser/animations.

Features

Na warsztat poszły dyrektywy *ngIf oraz *ngFor. Można od teraz po stronie HTMLa wykorzystywać składnię if/else:

TypeScript

Update przyniósł również wsparcie dla kolejnych wersji języka TypeScript. Angular4.0.0 jest zgodny z TypeScriptem 2.12.2. Z kolei przedwczorajszy update Angular4.1.0 przyniósł zgodność z TypeScriptem 2.22.3.

To tylko kluczowe zmiany. Zainteresowanych zachęcam do zerknięcia w CHANGELOG.

Migracja

Wpierw rzućmy okiem na nasz package.json. Interesują nas zależności @angular, zone.js oraz typescript.

Angular4 - before migration

Proces migracji zaczynamy od podniesienia TypeScriptu do najnowszej wersji:

npm install --save-dev [email protected]

W moim przypadku musiałem podnieść także @angular/cli:

npm install --save-dev @angular/[email protected]

Przyszedł czas na zone.js:

npm install --save [email protected]

Ostatnim etapem jest podniesienie pozostałych wykorzystywanych paczek, u mnie będzie to kolejno:

npm install --save-dev @angular/[email protected]

oraz

npm install @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}@latest --save

Proces migrowania do wersji 4.1.0 przeszedł bez żadnych komplikacji. Kluczowym elementem jest niewielki rozmiar mojej aplikacji. Robiłem jednak wcześniej migrację dużo bardziej rozbudowanego systemu. Problemy, które wyniknęły w trakcie, nie blokowały mnie jednak w żadnym stopniu. Pamiętajmy, że nie powinniśmy zbytnio odwlekać w czasie, aktualizacji systemów, które utrzymujemy i tych które się ciągle rozwijają.

Na koniec jeszcze package.json po wszystkich update’ach:

Angular4 - after migration

Źródła:

  1. http://angularjs.blogspot.com/2017/03/angular-400-now-available.html
  2. http://angularjs.blogspot.com/2017/04/angular-410-now-available.html
 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
  • Dzięki Dawid za artykuł. Na pewno się przyda 😉
    Może napisałbyś coś ciekawego o Zone.js?

  • Zone.js to bardzo ciekawy temat. Wrzucam zatem do listy TODO. Dzięki za propozycję i dobre słowo 🙂

Współpraca:
Polski Front-End