Google выпустила Angular 4.0.0

Сегодня стала доступна четвёртая версия популярного JS-фреймворка Angular. В большинстве случаев она обратно совместима с версиями 2.x.x.

Список изменений

Легче и быстрее

Google постаралась сделать приложения легче и быстрее. Достигнуто это было за счёт двух улучшений. Первое заключалось в изменении AOT-генерации кода, что позволило сократить его размер примерно на 60%. Вторым же улучшением стало выделение анимаций в отдельный пакет (раньше они находились в @angular/core). Добавить их в проект можно, импортировав в NgModule модуль BrowserAnimationsModule из @angular/platform-browser/animations.

Более подробно об этом можно почитать в этом Google-документе.

Улучшенные *ngIf и *ngFor

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

			<div *ngIf="userList | async as users; else loading">
 <user-profile *ngFor="let user of users; count as count" [user]="user">
 </user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>
		

Angular Universal

Universal, проект, позволяющий запускать Angular на сервере, получил первое обновление. Большая часть его исходников находится в @angular/platform-server. Для знакомства с Angular Universal можно использовать новый метод renderModuleFactory в @angular/platform-server или or демо-репозиторий Роба Уормальда. Подробная документация на подходе.

Совместимость с TypeScript 2.1 и 2.2

Angular обновлён до более свежей версии TypeScript. Это улучшит скорость ngc и проверку типов.

С полным списком изменений можно ознакомиться в блоге Angular.

Обновление до 4.0.0

Обновиться до версии 4 очень легко.

На Linux/Mac:

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

На Windows:

			npm install @angular/common@latest @angular/compiler@latest 
            @angular/compiler-cli@latest @angular/core@latest 
            @angular/forms@latest @angular/http@latest 
            @angular/platform-browser@latest @angular/platform-browser-dynamic@latest 
            @angular/platform-server@latest @angular/router@latest 
            @angular/animations@latest typescript@latest 
            --save
		

Затем запустите команду ng serve или npm start, и всё заработает. Интерактивное руководство по обновлению Angular уже находится в разработке.