angular2版本迭代之特性追踪

时间:2023-03-09 15:24:53
angular2版本迭代之特性追踪

一、 2.0.0 升级到 2.4

升级前:

1、确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements。

2、停止使用deep imports,这些符号不再是公共api的一部分。

3、停止使用Renderer.invokeElementMethod,因为该方法已被删除,目前没有其他的替换方案。

4、停止使用DefaultIterableDiffer,KeyValueDiffers#factories, 或 IterableDiffers#factories

升级期间:

更新你项目中所有angular相关依赖包到最新版本,如果你是使用的 Linux/Mac,可以使用如下命令升级:

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^2.0.0' typescript@'>=2.1.0 <2.4.0'

升级后:

目前没有建议的操作

二、 2.4 升级到 4.4

升级前:

1、确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements。
2、停止使用deep imports,这些符号不再是公共api的一部分。

3、停止使用Renderer.invokeElementMethod,因为该方法已被删除,目前没有其他的替换方案。

4、停止使用DefaultIterableDiffer,KeyValueDiffers#factories, 或 IterableDiffers#factories

升级期间:

1、如果你在应用中使用了ng动画,需要在你应用的跟模块(NgModule)添加以下引入:import BrowserAnimationsModule from @angular/platform-browser/animations。

2、angular4+增加了一个novalidate属性给表单元素,当你引入FormsModule时,为了使原生表单的功能生效,需要使用ngNoForm或者增加ngNativeValidate属性标识(备注:novalidate 属性是一个布尔属性。是h5的一个新属性,novalidate 属性规定当提交表单时不对表单数据(输入)进行验证)

3、用RendererFactoryV2替换RootRenderer

4、如果您使用动画和测试,请将mods [1] .NoopAnimationsModule添加到TestBed.initTestEnvironment调用中。

5、更新你项目中所有angular相关依赖包到最新版本,如果你是使用的 Linux/Mac,可以使用如下命令升级

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@^4.4.0 typescript@'>=2.1.0 <2.4.0'

升级后:

1、将template重命名为ng-template。(备注:从angular4+开始,<template>将会被删除,因为template太通用了,导致了一些命名上的冲突,所以现在angular团队决定以ng作为名称的前缀)

2、用InjectionToken替换掉所有的OpaqueToken

3、如果你调用了DifferFactory.create(...),删除ChangeDetectorRef 参数。

4、停止给ErrorHandler构造函数传任何参数。

5、如果你使用了ngProbeToken,请确保执行了依赖的引入( import ngProbeToken from @angular/core instead of @angular/platform-browser)

6、如果你在使用TrackByFn,请用TrackByFunction替换它。

7、如果你引入了任何的动画服务或工具,需要从额外的动画依赖包导入(import xxx from @angular/animations)。

8、用ngTemplateOutletContext替换掉ngOutletContext。

9、用IterableChangeRecord替换掉CollectionChangeRecord。

10、使用Renderer2替换掉Renderer。

11、使用queryParamsHandling代替preserveQueryParams。

12、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice,HttpClient简化了默认的人机工程学(你不再需要映射到json),并且现在支持类型返回值和拦截器。详见angular.io。

13、如果你从@angular/platform-browser中引入了DOCUMENT的使用,现在需要改成从@angular/common引入(即import this from @angular/common)

# Angular4升级点及新特性:

一、改进

1、体积更小,速度更快:Angular应用程序变得更小更快,并且在未来几个月将进一步改进框架。

2、更好的模版引擎:改进了AoT,将生成的代码的大小减少约60%。如果模板越复杂,那么优化的代码也会越多

3、动画模块改进:Angular将动画部分从@angular/core拆分出来,单独打包。将核心模块精简后,在不使用动画时产品中将不包含冗余的动画代码。如果需要动画,可使用相关功能自行导入新版本中的模板对于绑定语法做了些修改,将支持开发者使用if/else类型的语法,并支持在展开Observable(可观察对象)等代码中分配局部变量

二、新特性

1、增强 ngIf 和 ngFor 语法:模板绑定语法进行了几个有用的更改。现在可以使用if / else样式语法,并分配局部变量,例如在展开observable时

2、服务端渲染(Angular Universal):原先的Angular Universal是社区人员维护的,后被angular官方采用。目前在4.0.0版本中,将大部分的代码集成在@angular/platform-server模块中。为大家带来更好的服务端渲染体验,更简单Api调用。请参见基于Angular4的服务端渲染demo: https://github.com/z827101859/angular-universal 。之后,官方会为大家带来更好更全面的例子。

3、TypeScript 2.1 和 2.2 的兼容:Angular已更新为更新版本的TypeScript,提高了ngc的速度,并且有更好的类型检查机制

4、模板的Source Maps:当模板中的某些内容发生错误时,Angular会生成源映射,从而为原始模板提供有意义的上下文。

# 其他

1、兼容性:该版本向后兼容大多数应用中的2.x.x系列

2、为什么跳过Angular 3?

根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch的顺序排列,如2.3.1。

之前最新的Angular router版本号是3.3.0,而其它模块的版本号是2.2.0,由于版本号不同步,团队计划将其同步,直接采用4.0.0作为新版的版本号。

三、 4.4.7 升级到 5.2.11

升级前:

1、停止使用DefaultIterableDiffer,KeyValueDiffers#工厂或IterableDiffers#工厂

2、将template标签重命名为ng-template

3、用InjectionToken替换所有OpaqueToken

4、如果您调用DifferFactory.create(...)删除ChangeDetectorRef参数。

5、停止将任何参数传递给ErrorHandler的构造函数

6、如果您使用ngProbeToken,请确保您从@ angular / core而不是@ angular / platform-browser导入它

7、如果您使用TrackByFn,请改用TrackByFunction

8、如果您从@ angular / core导入任何动画服务或工具,则应从@ angular /animations导入它们

9、用ngTemplateOutletContext更换ngOutletContext。

10、用IterableChangeRecord替换CollectionChangeRecord

11、任何你使用Renderer的地方,现在都使用Renderer2

12、如果使用preserveQueryParams,请改为使用queryParamsHandling

13、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice。 HttpClient简化了默认的人机工程学(你不需要再映射到json),现在支持类型化的返回值和拦截器。 阅读更多关于angular.io

14、如果您使用@ angular / platform-browser中的DOCUMENT,则应该从@ angular / common中开始导入

升级中:

1、如果您依赖日期,货币,小数或百分比管道,请在5中对该格式进行细微更改。 对于使用除en-us以外的语言环境的应用程序,您将需要从@ angular / common / i18n_data / locale_fr和registerLocaleData(local)导入它并且可以选择locale_extended_fr。

2、不要依赖gendir,而要看看使用skipTemplateCodeGen。 阅读更多angular.io

3、将所有依赖关系更新到最新的Angular和正确版本的TypeScript。 如果你使用Linux / Mac,你可以使用:


npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@^5.2.0 typescript@2.4.2 rxjs@^5.5.2

升级后:

1、在使用ReflectiveInjector的地方,现在使用StaticInjector

2、在tsconfig.json中为preserveWhitespaces选择off值以获得此设置的好处,而默认值仍然保留空白。

5.0+新特性

1、构建优化

5.0版本默认采用CLI构建和打包。构建优化器是包含在CLI里面的一个工具,通过对你的应用程序更加语义化的理解可以使得你的打包程序(bundle)更小。构建优化器有两个主要工作。

第一,我们可以将应用程序的一部分标记为纯应用(pure),改进了现有工具提供的摇树优化,删除了应用中其它不需要的部分。

第二,从你的应用程序在运行时删除装饰符代码(decorators),装饰(decorators)是由编译器使用的,而在运行时并不需要可以被删除。这些工作减少了生成的JavaScript bundles的大小,并增加了你的用户应用程序的启动速度。

2、服务端状态转换和DOM支持

有了这个支持,可以让应用程序在服务器端和客户端版之间共享状态更容易。

Angular Universal是一个帮助开发者实现SSR的开源项目,通过在服务端渲染Angular应用程序,然后在客户端引导启动程序并生成HTML,由此更好的支持那些对javascript不太友好的化境来提高应用程序性能。

5.0版本中,Angular开发团队添加了ServerTransferStateModule(与之对应的BrowserTransferStateModule),这个模块允许你在服务端生成模块信息并传输到客户端,不需要在客户端重复创建。这一点在通过HTTP获取数据并展示时非常有用。通过服务端状态转移,客户端不需要在发送第二个HTTP数据请求,状态转移的API文档将在未来几周内发布。

此处另一个改变是AngularUniversal团队添加了Domino渲染工具,Domino的加入意味着我们在服务器端上下文中将可以支持更多的DOM操作,改进了对第三方JS和组件库的支持。

3、编译器改进

改进了Angular编译器来支持增量编译,重新构建变得更快,特别是对生产环境的构建和AOT编译,增强的装饰器可以通过更精细化的去除空格来减小产生的包。

改进后的AOT编译的性能大幅度,提升可以节省约95%的构建时间,40s可以提升至2s完成一次构建。

Preserve Whitespace:通过编译器,模板开发中的制表符、换行符、空格等可以原样的保留下来,并提供选项可以自选是否使用Preserve Whitespace来保留这些东西。也可以在tsconfig.json设置作用到全局

preserveWhitespaces: false 增强的装饰符支持

装饰符降低了在使用useValue、useFactory、data对lambda表达式的要求,开发者也可以使用一个lamdba表示来代替一个已定义的命名函数,也就意味着你可以不事先在*.d.ts中声明而直接执行代码。


@Component({
provider: [{provide: SOME_TOKEN, useFactory: () => {}}]
})
export class MyClass{}

去掉表达式方式


@Component({
provider: [{provide: SOME_TOKEN, useFactory: SomeEnum.ok }]
})
export class MyClass{}

4、国际化号码、日期和货币管道

Angular5中已经建立了新的号码,日期和货币管道,增加了跨浏览器的标准化实现,消除国际化在不同环境中的差异。

在5.0中管道可以使用我们自己的实现,可以在任何地方实现本地化的支持和配置。

V4 V5之间管道差异对比:https://docs.google.com/spreadsheets/d/12iygt-_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0

5、StaticInjector取代ReflectiveInjector依赖注入器

为了更多的减少polyfills,5.0中使用了StaticInjector注入器来替换原有的ReflectiveInjector注入器,这种注入器不再里来与ReflectPolyfill,可以大幅减少应用程序体积

在4.x中,依赖注入器一共有两种,即Injector的抽象类子类:

1. _NullInjector (该类的实例用于表示空的注入器)

2. ReflectiveInjector (表示一个依赖注入容器,用于实例化对象和解析依赖)

之前提供依赖注入方式:


ReflectiveInjector.resolveAndCreate(providers);

5.0中方式:


Injector.create(providers);

6、Zone执行速度的提升

5.0中默认提供的zones已经优化过,速度大幅提升,并且在应用程序中绕过zonee区域更加关于应用程序的性能。

绕过zone引导启动应用程序的方式:


platformBrowserDynamic().bootstrapModule(AppModule,{ngZone:'noop'}).then( ref => {} );

7、exportAs多命名支持

5.0中提供了组件/指令的多命名支持,在对用户不修改代码情况下进行组件的迁移操作等非常有用,将一个组件导出多个名字,可以让组件已一个新名字来使用而达到不破坏现有代码的目的。


@Component({
moduleId: module.id,
selector: 'a[mat-button], a[mat-raised-button] ,a[mat-icon-button],a[mat-fab],a[mat-mini-fab]';,
exportAs: 'matButton, matAnchor';
})

8、HttpClient

在4.3中HttpClient模块被封装在@angular/common中,新的HttpClient被封装在@angular/common/http中,更新Http模块后,需要使用HttpClientModule替换原有HttpModule,并在使用http服务时,可以去掉map(res=>res.json())的调用,新模块中已经不再需要这么写了。

9、CLI v1.5

Angular CLI v1.5版本中已经添加了对5.0版本的支持,后期将会把v5.0.0作为CLI的默认版本。这个版本中已经默认开启了构建优化,所以开发者可以直接感受到更小的js打包优化带来的收益。同时也更新了.tsconfig将更严格的遵循TypeScript标准,

10、Angular Forms adds updateOn Blur/Submit

可以使用blur/submit来进行事件更新,而不用每个input都写一个事件了。

Template Driven Forms
Before
<input name="firstName" ngModel>
After
<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
or
<form [ngFormOptions]="{updateOn: 'submit'}">
Reactive Forms
Before
new FormGroup(value);
new FormControl(value, [], [myValidator])
After
new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})
asyncValidators可以不再是作为一个参数传递 而是直接作用到表单上了。

11、RxJS 5.5

支持V5.2+ 5.5在bundle上更加优化了

12、New Router Lifecycle Events

GuardsCheckStart

ChildActivationStart

ActivationStart

GuardsCheckEnd

ResolveStart

ResolveEnd

ActivationEnd

ChildActivationEnd

四、5.2.11 升级到 6.0.6

更新前:

1、如果您从@ angular / core导入任何动画服务或工具,则应从@ angular /动画导入它们

2、用ngTemplateOutletContext替换ngOutletContext

3、用IterableChangeRecord替换CollectionChangeRecord

4、任何你使用Renderer的地方,现在都使用Renderer2

5、如果使用preserveQueryParams,请改为使用queryParamsHandling

6、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice。 HttpClient简化了默认的人机工程学(你不需要再映射到json),现在支持类型化的返回值和拦截器。 阅读更多关于angular.io

7、如果您使用@ angular / platform-browser中的DOCUMENT,则应该从@ angular / common中开始导入

8、在使用ReflectiveInjector的地方,现在使用StaticInjector

9、在tsconfig.json中为preserveWhitespaces选择off值以获得此设置的好处,而默认值仍然保留空白。

升级期间:

1、确保您使用的是Node 8或更高版本

2、在全局和本地更新您的Angular CLI,并通过运行以下命令将配置迁移到新的angular.json格式:


npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

3、更新package.json中的任何脚本以使用最新的Angular CLI命令。 所有CLI命令现在使用两个破折号来标记(例如ng build --prod --source-map)以符合POSIX标准。

4、将所有的Angular框架包更新到v6,以及RxJS和TypeScript的正确版本:


ng update @angular/core

5、更新之后,TypeScript和RxJS将更加准确地在您的应用程序中传输类型,这可能会暴露应用程序类型中的现有错误

6、在Angular Forms中,当您调用AbstractControl#markAsPending时,AbstractControl#statusChanges现在会发出一个PENDING事件。 确保在调用markAsPending时过滤或检查来自statusChanges的事件,这些事件是您为新事件的帐户。

7、如果您在禁用区域内的AnimationEvent中使用totalTime,则不会再报告0的时间。要检测动画事件是否报告禁用的动画,则可以使用event.disabled属性。

8、ngModelChange现在在值/有效性在其控件上而不是之前更新后发出,以更好地匹配期望值。 如果您依赖这些事件的顺序,则需要开始跟踪组件中的旧值。

9、更新 Angular Material 到最新版本,命令如下(这也会自动迁移弃用的API):


ng update @angular/material

10、使用ng update或普通包管理器工具来识别和更新其他依赖项。

11、如果您将TypeScript配置为严格(如果您已在tsconfig.json文件中将严格设置为true),请更新您的tsconfig.json以禁用strictPropertyInitialization或将属性初始化从ngOnInit移至您的构造函数。 您可以在TypeScript 2.7发行说明中了解有关此标志的更多信息。

更新后:

1. 使用rxjs-tslint自动更新规则删除不建议使用的RxJS6功能。

对于大多数应用程序来说,这意味着运行以下两个命令


npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

2. 一旦你和你所有的依赖已经更新到RxJS 6,删除rxjs-compat。

6.0.0+新特性: