Angular 5.0 來了! 有這些大變化
我們很高興地宣佈Angular 5.0.0——五角形甜甜圈釋出啦！這又是一個主版本，包含新功能並修復了很多bug。它再次體現了我們把Angular做得更小、更快、更好用的一貫目標。
image
以下簡單介紹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構建，效果更明顯。我們還增強了裝飾器，通過刪除空白達到減少包大小的目的。
現在，Angular編譯器底層的工作機制是TypeScript轉換，從而讓遞增式重新構建快了很多。TypeScript轉換是TypeScript 2.3新增的一個特性，可以讓我們深入到標準TypeScript編譯管道。
在開啟AOT標籤的情況下，執行ng serve就可以利用上述機制。
ng serve --aot
建議大家都試一下。將來這個配置會成為CLI的預設值。很多專案都有效能問題，涉及上千元件，我們希望各種規模的專案都能從這些改進中受益。
在執行 ofollow,noindex">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會報“未定義的源”錯誤。
以上就是本文的全部內容，希望對大家的學習有所幫助