Что нового в Angular 5

21 ноября 2017г.


Долгожданное, а для многих наоборот, неожиданное, обновление мажорной версии популярного (среди меня и моей бабушки, конечно же) фреймворка Angular наконец-то состоялось. Случилось это 1 ноября, и вот спустя почти месяц я наконец-то осуществил перевод своего проекта на Angular 5 и могу поделиться своими впечатлениями.

Встречайте — Пентагональный Пончик!


Сразу хочу отметить, что не все что предполагалось отдельными личностями, в итоге попало в релиз. Те кто читал мою прошлую статью, интерес к которой сегодня как никогда раньше велик, судя по счетчику просмотров, могли обнаружить это самостоятельно.

Чего не произошло: по всей видимости, режим компиляции JIT пока никто не выпилил, хотя в будущем это скорее всего произойдет. Шаблоны все также компилируются в промежуточные *.ngfactory.

Однако, если вы перейдете на Angular CLI 1.5, то запускать он будет по-умолчанию в AOT режиме, в котором действительно обновили watch-режим. И теперь при изменениях в одном шаблоне, не будет происходить перекомпиляция всех остальных.

TypeScript в шаблонах

Начну с наиболее полезного и приятного новшества для меня. Теперь проверка типов осуществляется не только в коде ваших компонентов, но и в шаблонах! И это действительно очень круто, хотя может и не всем понравиться.

Новое свойство декоратора компонентов

В свойства декоратора @Component добавлена новая опция preserveWhitespaces: boolean, которая позволяет нам управлять white-space-ами в шаблонах. Если установить это значение в false (по-умолчанию в текущей версии true):

@Component({ selector: 'app-root', templateUrl:'app/app.component.html', preserveWhitespaces: false })

то компилятор услужливо выпилит все лишние пробелы из шаблонов.

Если не хотите вручную прописывать данное свойство в каждом компоненте, то его можно задать глобально:

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });

Множественные exportAs для директив

Теперь в свойство exportAs для декоратора директив можно передавать несколько имен. Вроде как очень полезно для обратной совместимости, но конкретного примера, иллюстрирующего это я пока не нашел, а сам я пока не сталкивался со случаями, когда мне было бы это полезно. Ну и ладно, главное, что не мешает. Оставляйте в коментах свои примеры, постараемся разобраться.

Новые события в жизненном цикле роутера

Добавлены новые события: ActivationStart/End. Теперь полный жизненный цикл выглядит так:

GuardsCheckStart
ChildActivationStart
ActivationStart
GuardsCheckEnd
ResolveStart
ResolveEnd
ActivationEnd
ChildActivationEnd.

Работа с service-worker

Еще одно очень крутое новшество - стал доступен пакет @angular/service-worker, который очень сильно вам пригодится, если вы задумаете разрабатывать PWA на Angular 5. Я постараюсь собрать простой пример и поделиться с шагами его создания с вами.

Улучшения в Angular Universal

Добавлен API для удобной передачи состояния приложения с сервера на клиент и обратно. Также, добавили библиотеку Domino к platform-server, расширяющей прежние возможности для работы с DOM-ом на серверной стороне.

Обновление библиотек

Новый Angular теперь работает с TypScript версии не ниже 2.4, RxJS версии 5.5.2, в котором стали доступны lettable operators, а также используется обновленный zone.js / NgZone.


Изменений в целом еще очень много. Большая часть из которых работа над оптимизацией и скоростью работы фреймворка, уменьшение размера итогового бандла, работа над старыми ошибками. Особого смысла перечислять все не вижу, лучше посмотрите сами changelog. Самое интересное, что после перехода на новую версию, ощущения, что все кардинально изменилось, нет. Но отзывчивость UI, по ощущениям, повысилась, а размер production сборки наоборот, стал меньше.

Переход на новую версию

Пакеты в вашем проекте можно просто обновить вручную:

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

и устранить конфликты зависимостей. Лично я пошел другим путем, и тупо обновил глобальный Angular CLI до последней версии и создал новый проект в нем, а потом просто проанализировал изменения в сгенерированных package.json и angular-cli.json. Забавно, что codelyzer@^3.x.x нормально работал с angular@5.0.0, но на настоящий момент вышла версия 5.0.2, с которой третий codelyzer работать уже отказывался. Обновление до codelyzer@^4.0.1 полностью решило эту проблему.

И это была единственная проблема после upgrade-а, так что, обещания разработчиков о бесшовном переходе на новую версию, можно считать правдивыми.


Впечатления о новой версии у меня самые положительные. На первый взгляд кажется, что вроде бы ничего особо и не изменилось. Но если копнуть глубже, обнаруживается куча всего интересного. Особенно если вы пишите не самые простые приложения, используете серверный рендеринг, ваше приложение мультиязычное, или оно PWA. Не видел пока упоминаний о том, как новая версия затронула разработку мобильных приложений с NativeScript, но наверняка и в этой стороне изменения самые положительные.