Angular 5.0 來了! 有這些大變化

咱們很高興地宣佈Angular 5.0.0——五角形甜甜圈發佈啦！這又是一個主版本，包含新功能並修復了不少bug。它再次體現了咱們把Angular作得更小、更快、更好用的一向目標。

如下簡單介紹v5的重大變化。要了解詳情，請看changelog。

構建優化器

5.0.0開始，經過CLI執行的產品構建默認使用構建優化器。

構建優化器是CLI中的一個工具，它基於咱們對你Angular應用的理解，能夠把構建後的包變得更小。

構建優化器有兩個主要任務。首先，把你應用的某些部分標記爲pure，以便原有工具利用它改進「tree shaking」的優化效果，同時刪除應用中沒必要要的東西。

其次，構建優化器會從你的應用中刪除Angular裝飾器代碼。裝飾器只有編譯器會用，運行時不用，能夠刪掉。上述兩項優化均可以減小生成JS包的大小，同時加快應用啓動速度。

Angular Universal狀態轉交API及對DOM的支持

這樣更便於在服務端和客戶之間共享應用狀態。

Angular Universal是一個幫助開發者執行服務端渲染（SSR）的項目。服務端渲染生成的HTML對不支持JS的蜘蛛和爬蟲友好，同時有助於提高用戶感知性能。

在5.0.0中，開發團隊添加了ServerTransferStateModule及對應的BrowserTransferStateModule。這個模塊能夠幫開發者在服務端渲染生成的內容中加入相關信息，而後傳送給客戶端，從而避免重複生成。這對於經過HTTP獲取數據的場景是頗有用的。經過把狀態從服務器傳送到客戶端，開發者就不用再發第二次HTTP請求了。狀態轉交的相關文檔幾周後會發佈。

Angular Universal團隊還把平臺服務器Domino加到了平臺服務器中。Domino支持在服務器端環境下更多的開箱即用的DOM操做，能夠改進咱們對非服務端第三方JS及組件庫的支持。

編譯器改進

爲支持遞增編譯，咱們改進了Angular編譯器。結果讓從新構建加快，特別是對產品構建和AOT構建，效果更明顯。咱們還加強了裝飾器，經過刪除空白達到減小包大小的目的。

TypeScript轉換

如今，Angular編譯器底層的工做機制是TypeScript轉換，從而讓遞增式從新構建快了不少。TypeScript轉換是TypeScript 2.3新增的一個特性，可讓咱們深刻到標準TypeScript編譯管道。

在打開AOT標籤的狀況下，運行ng serve就能夠利用上述機制。

ng serve --aot

建議你們都試一下。未來這個配置會成爲CLI的默認值。不少項目都有性能問題，涉及上千組件，咱們但願各類規模的項目都能從這些改進中受益。

在執行https://angular.io 的遞增AOT構建時，新編譯器管道可節省95%的構建時間（在咱們開發機上測試的結果是從40多秒減小爲不到2秒）。

咱們的目標是讓AOT編譯快到能開發者用它開發的程度。如今，咱們已經衝進了2秒之內，所以未來的CLI中可能會默認開啓AOT。

做爲向本次轉換過渡的一步，咱們再也不須要genDir，而outDir也變了：如今，咱們會把爲包生成的文件都打到node_modules裏。

保留空白

過去編譯器會忠實地復現並在模板中包含製表符、換行符和空白。如今你可選擇是否在組件和應用中包含空白了。

能夠在每一個組件的裝飾器中指定這個配置，而當前的默認值爲true。

@Component({
 templateUrl: 'about.component.html',
 preserveWhitespaces: false
}
export class AboutComponent {}
</pre>

或者也能夠在tsconfig.json中進行全局配置，其中該項默認值也是true。

"extends": "../tsconfig.json",
 "compilerOptions": {
  "outDir": "../out-tsc/app",
  "baseUrl": "./",
  "module": "es2015",
  "types": []
 },
 "angularCompilerOptions": {
  "preserveWhitespaces": false
 },
 "exclude": [
  "test.ts",
  "**/*.spec.ts"
 ]
}
</pre>

通常規則是組件級配置要覆蓋應用級配置。開發團隊打算未來把默認值改爲false，默認爲開發者節省空間。不要擔憂你的<pre>標籤，編譯器會智能處理它們。

改進的裝飾器支持

如今支持Lambda和對象字面量useValue、useFactory和data裝飾器中的表達式降級（expression lowering）。這樣可使用只能在運行時計算的裝飾器中被降級（lower）的值。

所以如今能夠不使用命名函數，而改用Lambda函數。換句話說，執行代碼不會影響你的d.ts或你的外部API。

Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}
</pre>

咱們還會將表達式降級，做爲useValue的一部分。

Component({
 provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}
</pre>

國際化的數值、日期和貨幣管道

咱們寫了新的數值、日期和貨幣管道，讓跨瀏覽器國際化更方便，不須要再使用i18n的膩子腳本（polyfill）。

在之前版本的Angular中，咱們一直依賴瀏覽器及其i18n API提供數值、日期和貨幣格式。爲此，不少開發者都在使用膩子腳本（polyfill），而結果也很差。不少人反饋說一些常見的格式（如貨幣）不能作到開箱即用。

而在5.0.0中，咱們把這個管道更新成了本身的實現，依賴CLDR提供普遍的地區支持，並且可配置。如下是咱們對v4和v5所作的比較：a document comparing the pipe behavior between v4 and v5。

若是你還沒條件使用新管理，能夠導入DeprecatedI18NPipesModule以降級到舊的行爲。

StaticInjector代替ReflectiveInjector

爲了消除對更多膩子腳本（polyfill）的依賴，咱們用StaticInjector代替了ReflectiveInjector。前者再也不須要Reflect，爲開發者減小了應用大小。

之前

ReflectiveInjector.resolveAndCreate(providers);

之後

Injector.create(providers);

提高Zone的速度

一方面提高了Zone的速度，另外一方面也能夠在特別關注性能的應用中繞過它。

若要繞過它，啓動應用時加上noop：

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

這裏有一個完整的例子：the example ng-component-state project。

exportAs

組件和指令中增長了對多名稱的支持。這有助於用戶實現無痛遷移。經過把指令導出爲多個名稱，能夠在不破壞原有代碼的狀況下在Angular語法中使用新名稱。Angular Material項目已經在其前綴遷移項目中用上了，對其餘組件做者確定也有用。

示例

@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',
 .
 .
 .
}
</pre>

**HttpClient**

v4.3在@angular/common中推出過HttpClient，用於在Angular中發送請求，它小巧易用。HttpClient受到了開發者的普遍讚譽，所以咱們推薦在全部應用中使用它，放棄以前的@angular/http library。

要升級HttpClient，須要在每一個模塊的@angular/common/http中把HttpModule替換爲HttpClientModule，注入HttpClient服務，刪除全部map(res => res.json())。

CLI v1.5

從Angluar CLI v1.5開始，已經開始支持Angluar v5.0.0，默認生成v5項目。

在此次小版本升級中，咱們默認打開了構建優化器，讓開發者拿到更小的包。

咱們還修改了使用.tsconfig文件的方式，以更嚴格地遵照TypeScript標準。此前，若是檢測到延遲加載的路由，並且你在tsconfig.json中手工指定了一組files或include，那這些路由會自動化處理。而現在，根據TypeScript規範，咱們再也不這麼幹了。默認狀況下，CLI對TypeScript的配置中沒有files或include，所以多數開發者不會受影響。

Angular表單添加updateOn Blur/Submit

這樣能夠根據blur或submit來運行驗證和更新值的邏輯了，沒必要再單純依賴input事件。

表單對應用很重要，若是有服務端驗證，或者驗證或更新值會觸發較慢的操做，你固然但願它少跑幾回。如今你能夠在控件層面控制驗證和更新值的時機了，也能夠在表單層面設置。

此外，你如今能夠直接在選項中指定asyncValidators，而不是經過第三個參數指定。

模板驅動的表單

之前

<input name="firstName" ngmodel=""/>

之後?

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">
</pre>

或者

<form [ngFormOptions]="{updateOn:'submit'}">
</pre>

反應式表單

之前

new FormGroup(value);
new FormControl(value, [], [myValidator])

之後)

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]}
</pre>

**RxJS 5.5**

咱們已經把使用的RxJS更新到5.5.2或更高版本。這個新發布的RxJS可讓開發徹底擺脫以前導入機制的反作用，由於咱們以新的lettable operators的方式使用了RxJS。這些新操做符消除了反作用，以及以前導入操做符中「patch」方法存在代碼切割和「tree shaking」等問題。

再也不這樣:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);
</pre>

如今這樣:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
 map(user => user.name),
 filter(name => name),
);
</pre>

此外，RxJS如今發行了一個使用ECMAScript Modules的版本。新Angular CLI會默認拉取這個新版本，讓包大小有明顯減少。若是你沒使用Angular CLI，那仍是應該指向這個新版本。相關文檔在此：Build and Treeshaking。

新的路由器生成周期事件

咱們給路由器添加了新的生命週期事件，讓開發者能夠跟蹤running guard啓動到激活完成的各個階段。這些事件可在有子組件更新時，在一個特定的路由器出口上展現加載動畫，或者測量性能。

新的事件（按順序）是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。如下是一個使用這些事件啓動和中止加載動畫的示例：

class MyComponent {
 constructor(public router: Router, spinner: Spinner) {
  router.events.subscribe(e => {
   if (e instanceof ChildActivationStart) {
    spinner.start(e.route);
   } else if (e instanceof ChildActivationEnd) {
    spinner.end(e.route);
   }
  });
 }
}
</pre>

如何更新

這裏有Angular Update Guide，告訴你整個過程，以及更新前要作哪些事，還有更新應用的步驟，以及作好迎接Angular將來版本的準備等信息。

咱們刪除不少之前廢棄的API（如OpaqueToken），也公佈了一些新的廢棄項。以上指南會詳細介紹這些變動。

已知問題

當前已知與source map相關的問題。某些source map會報「未定義的源」錯誤。

以上就是本文的所有內容，但願對你們的學習有所幫助