如何評價新版的 Angular 5.0？

Angular 開發團隊今天宣布推出移動和桌面框架的主要版本 Angular 5.0。Angular 5.0 專註於使Angular「更小，更快，更易於使用」。

只是遵循語義化版本號規範的正常迭代。

從 2017 年 7 月 19 日的 5.0.0-beta.0 開始，已經經過了 3 個多月，一共發布了 8 個 Beta 版本、10 個 RC 版本。現在才更新 5.0.0 的，也只是普通的 Average User，並不是什麼先驅用戶。

語義化版本號中，Major Version 的作用是引入 Breaking Change，Minor Version 才是用來增加功能的，除非有需要靠 Breaking Change 才能引入的功能，否則都不需要到 Major Version 中引入（除非是時間上正巧完成）。

所以很明顯的，很多地方（包括某官方博客）中聲稱的 5.0 新特性都是不完全合理的，比如 Preserve Whitespace 和 exportAs 早在 4.4 里就已經引入了，HttpClient 更是在 4.3 版本就引入了。

之所以仍然作為 5.0 的新特性是因為 4.x 和 5.x 的分支是平行推進的，實際開發上這幾個特性是先進入 5.0 版本，之後再 Cherry Pick 到 4.x 版本中。但從（普通）用戶視角而言，5.0 是 4.x 的後繼版本而非先行版本，所以應當認為 4.x 中的特性不再算作 5.0 的特性。

真正有價值的部分反而是一些非功能部分，比如 Angular Compiler 的優化，目前 AOT 的增量編譯幾乎可以控制在 1s 之內（所以每次保存只會 -1s？）；i18n 相關 Pipe 實現不再依賴 Intl API 等等。

較為可惜的是 AOT by default，在 5.0 正式版發布前一天被 Revert 了（fix(@angular/cli): use JIT by default with ng5 by filipesilva · Pull Request #8267 · angular/angular-cli）。當然，準確地說這是 Angular CLI 基於 Angular 5 才能得以實現的功能，而非 Angular 5 的功能（並且只是默認行為，不影響可實現性）。

總結一下就是：

正確理解語義化版本號含義，平常心看待大版本變更。

幾乎所有不必要的誤解都來自於對「語義化版本號」的不了解。

@Trotyl Yu 說的很好，很多新特性和改動在 4.x 已經開始推進了。具體可以見 CHANGELOG。

現在 NG 唯一讓我感覺不舒服的就是 AOT 很蠢，其他已經接近我心中的框架了。

打個廣告，Element Angular 已經更新到 Element UI 2.0 ，NG 開發爸爸們快來試試！

Angular5.0.0新特性

文章來自官網部分翻譯

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Angular5.0.0版本已經正式發布

請點擊此處輸入圖片描述

總結一下v5.0.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設置作用到全局

註：組件級別的選項會覆蓋應用程序級別的設置。

增強的裝飾符支持

裝飾符降低了在使用useValue、useFactory、data對lambda表達式的要求，開發者也可以使用一個lamdba表示來代替一個已定義的命名函數,也就意味著你可以不事先在*.d.ts中聲明而直接執行代碼。

去掉表達式方式

4.國際化號碼、日期和貨幣管道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中提供了組件/指令的多命名支持，在對用戶不修改代碼情況下進行組件的遷移操作等非常有用，將一個組件導出多個名字，可以讓組件已一個新名字來使用而達到不破壞現有代碼的目的。

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 & After & or &