angular2版本迭代之特性追踪

1、 2.0.0 升级到 2.4

升级前：

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

二、中止使用deep imports，这些符号再也不是公共api的一部分。

三、中止使用Renderer.invokeElementMethod，由于该方法已被删除，目前没有其余的替换方案。

四、中止使用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、 2.4 升级到 4.4

升级前：

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

三、中止使用Renderer.invokeElementMethod，由于该方法已被删除，目前没有其余的替换方案。

四、中止使用DefaultIterableDiffer，KeyValueDiffers#factories, 或 IterableDiffers#factories

升级期间：

一、若是你在应用中使用了ng动画，须要在你应用的跟模块（NgModule）添加如下引入：import BrowserAnimationsModule from @angular/platform-browser/animations。

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

三、用RendererFactoryV2替换RootRenderer

四、若是您使用动画和测试，请将mods [1] .NoopAnimationsModule添加到TestBed.initTestEnvironment调用中。

五、更新你项目中全部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'

升级后：

一、将template重命名为ng-template。（备注：从angular4+开始，<template>将会被删除，由于template太通用了，致使了一些命名上的冲突，因此如今angular团队决定以ng做为名称的前缀）

二、用InjectionToken替换掉全部的OpaqueToken

三、若是你调用了DifferFactory.create(...)，删除ChangeDetectorRef 参数。

四、中止给ErrorHandler构造函数传任何参数。

五、若是你使用了ngProbeToken，请确保执行了依赖的引入（ import ngProbeToken from @angular/core instead of @angular/platform-browser）

六、若是你在使用TrackByFn，请用TrackByFunction替换它。

七、若是你引入了任何的动画服务或工具，须要从额外的动画依赖包导入（import xxx from @angular/animations）。

八、用ngTemplateOutletContext替换掉ngOutletContext。

九、用IterableChangeRecord替换掉CollectionChangeRecord。

十、使用Renderer2替换掉Renderer。

十一、使用queryParamsHandling代替preserveQueryParams。

十二、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice，HttpClient简化了默认的人机工程学（你再也不须要映射到json），而且如今支持类型返回值和拦截器。详见angular.io。

1三、若是你从@angular/platform-browser中引入了DOCUMENT的使用，如今须要改为从@angular/common引入（即import this from @angular/common）

# Angular4升级点及新特性：

1、改进

一、体积更小，速度更快：Angular应用程序变得更小更快，而且在将来几个月将进一步改进框架。

二、更好的模版引擎：改进了AoT，将生成的代码的大小减小约60％。若是模板越复杂，那么优化的代码也会越多

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

2、新特性

一、加强 ngIf 和 ngFor 语法：模板绑定语法进行了几个有用的更改。如今可使用if / else样式语法，并分配局部变量，例如在展开observable时

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

三、TypeScript 2.1 和 2.2 的兼容：Angular已更新为更新版本的TypeScript，提升了ngc的速度，而且有更好的类型检查机制

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

# 其余

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

二、为何跳过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做为新版的版本号。

 

3、 4.4.7 升级到 5.2.11

升级前：

一、中止使用DefaultIterableDiffer，KeyValueDiffers＃工厂或IterableDiffers＃工厂

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

三、用InjectionToken替换全部OpaqueToken

四、若是您调用DifferFactory.create（...）删除ChangeDetectorRef参数。

五、中止将任何参数传递给ErrorHandler的构造函数

六、若是您使用ngProbeToken，请确保您从@ angular / core而不是@ angular / platform-browser导入它

七、若是您使用TrackByFn，请改用TrackByFunction

八、若是您从@ angular / core导入任何动画服务或工具，则应从@ angular /animations导入它们

九、用ngTemplateOutletContext更换ngOutletContext。

十、用IterableChangeRecord替换CollectionChangeRecord

十一、任何你使用Renderer的地方，如今都使用Renderer2

十二、若是使用preserveQueryParams，请改成使用queryParamsHandling

1三、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice。 HttpClient简化了默认的人机工程学（你不须要再映射到json），如今支持类型化的返回值和拦截器。 阅读更多关于angular.io

1四、若是您使用@ angular / platform-browser中的DOCUMENT，则应该从@ angular / common中开始导入

升级中：

一、若是您依赖日期，货币，小数或百分比管道，请在5中对该格式进行细微更改。 对于使用除en-us之外的语言环境的应用程序，您将须要从@ angular / common / i18n_data / locale_fr和registerLocaleData（local）导入它而且能够选择locale_extended_fr。

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

三、将全部依赖关系更新到最新的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

升级后：

一、在使用ReflectiveInjector的地方，如今使用StaticInjector

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

5.0+新特性

一、构建优化

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

第一，咱们能够将应用程序的一部分标记为纯应用(pure)，改进了现有工具提供的摇树优化，删除了应用中其它不须要的部分。

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

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

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

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

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

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

三、编译器改进

改进了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{}

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

Angular5中已经创建了新的号码，日期和货币管道，增长了跨浏览器的标准化实现，消除国际化在不一样环境中的差别。

在5.0中管道可使用咱们本身的实现，能够在任何地方实现本地化的支持和配置。

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

五、StaticInjector取代ReflectiveInjector依赖注入器

为了更多的减小polyfills，5.0中使用了StaticInjector注入器来替换原有的ReflectiveInjector注入器，这种注入器再也不里来与ReflectPolyfill，能够大幅减小应用程序体积

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

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

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

以前提供依赖注入方式：

ReflectiveInjector.resolveAndCreate(providers);

5.0中方式：

Injector.create(providers);

六、Zone执行速度的提高

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

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

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

七、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';
})

八、HttpClient

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

九、CLI v1.5

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

十、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能够再也不是做为一个参数传递 而是直接做用到表单上了。

十一、RxJS 5.5

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

十二、New Router Lifecycle Events

GuardsCheckStart

ChildActivationStart

ActivationStart

GuardsCheckEnd

ResolveStart

ResolveEnd

ActivationEnd

ChildActivationEnd

4、5.2.11 升级到 6.0.6

更新前：

一、若是您从@ angular / core导入任何动画服务或工具，则应从@ angular /动画导入它们

二、用ngTemplateOutletContext替换ngOutletContext

三、用IterableChangeRecord替换CollectionChangeRecord

四、任何你使用Renderer的地方，如今都使用Renderer2

五、若是使用preserveQueryParams，请改成使用queryParamsHandling

六、从HttpModule和Http服务切换到HttpClientModule和HttpClientservice。 HttpClient简化了默认的人机工程学（你不须要再映射到json），如今支持类型化的返回值和拦截器。 阅读更多关于angular.io

七、若是您使用@ angular / platform-browser中的DOCUMENT，则应该从@ angular / common中开始导入

八、在使用ReflectiveInjector的地方，如今使用StaticInjector

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

升级期间：

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

二、在全局和本地更新您的Angular CLI，并经过运行如下命令将配置迁移到新的angular.json格式：

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

三、更新package.json中的任何脚本以使用最新的Angular CLI命令。 全部CLI命令如今使用两个破折号来标记（例如ng build --prod --source-map）以符合POSIX标准。

四、将全部的Angular框架包更新到v6，以及RxJS和TypeScript的正确版本:

ng update @angular/core

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

六、在Angular Forms中，当您调用AbstractControl＃markAsPending时，AbstractControl＃statusChanges如今会发出一个PENDING事件。 确保在调用markAsPending时过滤或检查来自statusChanges的事件，这些事件是您为新事件的账户。

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

八、ngModelChange如今在值/有效性在其控件上而不是以前更新后发出，以更好地匹配指望值。 若是您依赖这些事件的顺序，则须要开始跟踪组件中的旧值。

九、更新 Angular Material 到最新版本，命令以下（这也会自动迁移弃用的API）:

ng update @angular/material

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

十一、若是您将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+新特性：