Поддержка Angular 4 в NativeScript

На прошлой неделе команда Angular объявила о выпуске релиза Angular 4.0.0 и сегодня мы рады сообщить, что NativeScript отлично работает с этой версией Angular.

Из основных преимуществ Angular 4: меньшие размеры пакетов и увеличение скорости работы приложений. А теперь обновим наши приложения NativeScript, чтобы получить все эти улучшения.

Обновление

Для получения обновления необходимо вначале обновить зависимости проекта в файле package.json. Вот как выглядит типовое обновление:

Несколько замечаний по этим изменениям:

• Главное здесь в том, чтобы обновить пакет nativescript-angular до версии 1.5.0 и пакеты Angular до версии 4.0.0.
• В Angular 4 некоторые библиотеки анимации переехали в свой пакет @angular/animations. Этот пакет опционален и вы можете смело удалить его, если вам не нужны анимации в приложении.
• Пакет zone.js теперь указан как dependency, а не devDependency как раньше.
• Обратите особое внимание, что версия TypeScript указана как ~2.1.0. И это очень важно, так как NativeScript с Angular пока не поддерживает TypeScript 2.2.. Его поддержка запланирована на NativeScript 3.0, который выйдет очень скоро 🙂

Крупные изменения

При обновлении нужно учесть несколько моментов. Во-первых, изменён путь до класса NativeScriptModule. В большинстве приложений он указан только в файле app.module.ts, поэтому исправить недолго.

До исправления:

import { NativeScriptModule } from "nativescript-angular/platform";
После:

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
Во-вторых, для использования анимаций Angular нужно импортировать NativeScriptAnimationsModule из «nativescript-angular/animations» корневого NgModule. Оно будет работать также, как используемые вами классы NativeScriptFormsModule, NativeScriptHttpModule и NativeScriptRouterModule. Вот как примерно выглядит несложный файл app.module.ts, использующий NativeScriptAnimationsModule:

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptAnimationsModule } from "nativescript-angular/animations";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

@NgModule({
imports: [
NativeScriptModule,
NativeScriptAnimationsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

Внимание: при использовании анимаций Angular, обязательно включайте зависимость @angular/animations в файл package.json!

Заключение

И напоследок: команда Angular объявила устаревшим тег