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