NativeScript 支持 Angular 4

上周，Angular 团队 发布了 Angular 4.0.0，今天我们很高兴地宣布 NativeScript 现在支持这个最新版本 🎉

Angular 4 带来了更小的应用程序包和更快的运行时速度。让我们看看如何更新您的 NativeScript 应用程序以利用这些优化。

更新

要获取更新，您需要更新 package.json 文件中的几个依赖项。以下是一个典型的更新示例。

关于以上更改的一些说明。

• 这里的主要更新是将 nativescript-angular 包升级到 1.5.0 版，并将各种 Angular 包升级到 4.0.0 版。请注意，@angular/router 包从 3.x 升级到 4.x，而不是从 2.x 升级到 4.x。
• 在 Angular 4 中，各种动画库现在位于自己的包中，即 @angular/animations。此包是可选的，因此只有在打算在应用程序中使用 Angular 动画时才需要依赖它。（请注意，由于此更改，在 NativeScript 应用程序中使用 Angular 动画需要额外的一步——稍后会详细介绍。）
• zone.js 依赖包现在应该列为依赖项，而不是开发依赖项。这是为了解决一些非常晦涩的 npm 同级依赖关系问题。
• 请注意，TypeScript 版本仍然指定为 ~2.1.0。这一点很重要，因为 **带有 Angular 的 NativeScript 目前还不支持 TypeScript 2.2**。支持将在我们即将发布的 NativeScript 3.0 版本中提供，您很快就会看到它的发布候选版本 😄

重大更改

在您更新包时，您应该注意两个微不足道的重大更改。首先，NativeScriptModule 类路径已更改。在大多数应用程序中，此路径将在 app.module.ts 文件中使用一次，因此它应该是一个快速更新。

之前

import { NativeScriptModule } from "nativescript-angular/platform";

之后

import { NativeScriptModule } from "nativescript-angular/nativescript.module";

其次，要在 NativeScript 中使用 Angular 动画，您现在需要从 "nativescript-angular/animations" 中导入 NativeScriptAnimationsModule 到您的根 NgModule 中。这与您可能已经使用的 NativeScriptFormsModule、NativeScriptHttpModule 和 NativeScriptRouterModule 类的工作方式完全相同。以下是一个使用 NativeScriptAnimationsModule 的简单 app.module.ts 文件示例。

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 团队弃用了 <template> 标签，转而使用 <ng-template>，因此在运行应用程序时几乎肯定会收到以下警告。

The <template> element is deprecated. Use <ng-template> instead.

修复方法很简单，只需将应用程序中的所有 <template> 标签更新为 <ng-template>。

就是这样。对于大多数用户来说，升级到 Angular 4 应该是无缝的。您可以 参考我们的变更日志以了解所有更改的完整列表，如果您遇到问题，请在我们的 问题跟踪器 上告诉我们。

请随时在评论中告诉我们您对这个最新的 Angular 更新的看法。