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+新特性：