Angular是最受歡迎的網頁開發框架之一。隨著最新版本的發布，它為網頁開發人員提供了更多功能。
眾所周知，谷歌4月份發布了新版Angular。這是Google於2018年發布的第一個主要版本，主要側重於工具鏈，並使用戶更容易創建不同類型的應用程式。這個主要版本還包含一些新功能和升級。在最後階段，這個版本證實了新的Angular版本更輕，更快，更容易。開發人員顯然更喜歡它，因為它使開發更容易。另外，Angular 6支持TypeScript 2.7版本。因此，在新的TypeScript版本的幫助下，使用條件類型聲明，默認聲明和嚴格的類初始化進行編碼要容易得多。
現在是時候討論在Angular 6中做出的重大改變。
1.Angular元素
Angular是開發單頁應用程式的完美框架。要創建可以包含在任何現有網頁中的小部件或組件，在早期版本的Angular中不是一件簡單的任務。但是在Angular 6中，它可以在Angular Elements的幫助下完成。實際上，Angular 6是第一款完全支持Angular Elements的Angular版本。Angular Elements是Angular的Rob Wormald的創意。Angular Elements包將使我們能夠創建一個Angular組件，然後將該組件發布為可在任何HTML頁面中使用的Web組件（即使該頁面不使用Angular框架）。它實際上需要一個Angular組件，然後將其封裝在一個自定義元素（如DOM元素）中，
2.服務工作者支持
服務工作人員基本上是在Web瀏覽器中運行並可以緩存應用程式的腳本。服務工作者首先在Angular 5中引入。在Angular 6中，服務工作者帶來了一些錯誤修復，包括一些新的功能。因此，當我們部署最新版本的應用程式時，我們可能需要停用或卸載現有的服務工作人員。在Angular 5中，這樣做並不是直截了當的選擇，但Angular 6為這個功能帶來了一個名為safety-worker.js的新腳本文件，這個文件實際上是生產包的一部分，它幫助我們取消註冊現有的服務工作者S）。
Angular 6現在支持在服務人員中配置導航URL。服務工作人員會將不匹配任何源或數據組的導航請求重定向到指定的索引文件。現在，我們可以在包含所需URL的ngsw-config.json文件中提及一個可選的navigationUrls列表。例如，如果請求的URL與任何正面模式匹配且沒有任何導航模式匹配，則它將被視為導航請求並由服務工作人員以正確的方式處理。在Angular 6中，除非伺服器重新連接並更新工作，否則服務工作人員將保持當前模式。
3.再見模板元素
一年前，當Angular 4發布時，<template>元素被折舊了。現在是時候告別<template>了，因為它現在已經從Angular 6框架中移除了。我們現在需要使用<ng-tempalate>來代替使用<template>。
4. i18n
Angular 6的主要變化之一是國際化或國際化。在Angular 6中，i18n即將進行運行時渲染，因此不需要為每個語言環境構建一個應用程式。貨幣管道在Angular 6中得到了改進，因此它具有很大的意義，例如，它不會將每個貨幣值再加上兩位數字。然後它會將貨幣匯總到合適的位數（例如，它可以是阿拉伯第納爾的3位數字總結或智利比索的0總結）。如果我們想以編程方式檢索這些值，那麼我們需要使用i18n函數getNumberOfCurrencyDigits()。有它們也像公開曝光了一些其他的格式化功能 formatDate、 formatCurrency、 formatPercent 和 formatNumber。
5.Ivy：新的渲染引擎
在Angular 6中，Angular團隊介紹了他們的第三個渲染引擎Ivy。常春藤是下一代Angular渲染引擎。在Angular以前的一些版本中（Angular 2到Angular 4），Angular使用了一個視圖引擎來進行渲染。此渲染引擎體驗的引入提高了應用程式的速度並縮小了應用程式的大小。Angular團隊期望新的渲染引擎具有相同類型的體驗。
Angular將我們的模板編譯為等效的TypeScript代碼，然後將TypeScript代碼編譯為JavaScript，然後將結果發送給我們的用戶。因此，常青藤渲染器是新的渲染引擎，基本上旨在支持與現有渲染器的向後兼容性，然後專注於提高渲染速度，並優化最終包的大小。在Angular中，它不會是默認的渲染器，但我們可以使用編譯器選項手動啟用它。這個重要的功能並沒有在Angular 6中完全發布，因為它處於實驗模式; 除了Angular的下一個版本的完整版本。
6. ngModelChange
在Angular 6之前， ngModelChange 事件在所述表單控制項更新之前發布。如果我們有ngModelChange 通過控制項檢查值的事件的事件處理程序， 則將返回舊值而不是更改的值。現在，在Angular 6中， ngModelChange 在窗體控制項中更新了值之後發出了值。
7. ElementRef
在Angular以前的版本中，當我們想創建一個元素在模板中的參考，我們可以使用 @ViewChild 或 @ViewChildren 或直接注射使用ElementRef主機。但是，問題在於ElementRef的 nativeElement 屬性類型與其他任何元素一樣。但是現在在Angular 6中，如果我們想要，我們可以更嚴格地使用ElementRef類型。
@ViewChild('login') login: ElementRef<HTMLInputElement>;
ngAfterViewInit() {
this.loginInput.nativeElement.focus();
}
8. Bazel編譯器
Bazel編譯器實際上是一個構建系統或機制，用於在Google上構建幾乎所有的軟體。該編譯器只重建構建所需的內容。由於原始碼經常變化，因此對於每一個小小的變化重建整個應用程式沒有任何意義。我們不是重建整個應用程式，而是僅構建實際更改的代碼以及取決於這些更改的代碼。因此，藉助先進的本地和分布式緩存，優化的依賴關係分析和並行執行，我們可以實現快速增量構建。使用Angular 6，我們將擁有此編譯器支持。
9. RxJS 6.0
Angular 6現在在內部使用RxJS 6。所以我們需要相應更新我們的應用程式。這些更改為開發人員提供了更高的性能，並且更容易調試AJAX調用堆棧並提高模塊性，使其儘可能向後兼容。但RxJS改變了我們導入東西的方式。
在RxJS 5中，您可能正在寫作：
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
const squares$: Observable<number> = Observable.of(1, 2).map(n => n * n);
RxJS 5.5引入了管道操作員：
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n));
RxJS 6.0將進口更改為：
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n));
所以，根據上面的代碼演示，我們需要在我們的Angular 6應用程式中更改RxJS的導入。但是我會說我們現在不需要改變它。因為RxJS發布了一個名為rxjs-compat的庫，它允許我們使用舊版本語法的RxJS版本6.0。
10.Tree Shaking
Angular 6從引用服務的模塊移動到引用模塊的服務，以使Angular應用更小。抖動樹是一個構建優化步驟，它試圖確保任何未使用的代碼不會在我們的最終包中使用。新渲染器將直接生成模板指令，而不是渲染模板數據並將其直接傳遞給知道如何處理所有內容的解釋器。這導致更小的捆綁和更快的啟動時間。
在Angular 6中有一種定義可注入服務的新方法。採用這種新方法，我們可以@Injectable() 使用新providedIn 屬性直接在裝飾器中 註冊提供者 。它從我們的應用程式接受'root'作為值或任何模塊名稱。當我們使用'root'時，這代表著這個injectable將被註冊為應用程式中的單例對象，我們不需要將其添加到根模塊的提供者中。以同樣的方式，如果我們使用 provideIdIn:LoginModule，那麼可注射的註冊作為提供者 LoginModules 而不添加到模塊的提供者。
@Injectable({
providedIn: 'root'
})
export class UserService {}
因此，在上面的章節中，我們將討論Angular 6的最重要特性。除此之外，還有幾個特性，如：
- 路由器有時會在路由實例化和新的導航請求到達時遇到競爭條件。Angular 6已經解決了這個問題。
- 避免重寫 ngInjectableDef 裝飾器中存在的類型。
- Angular Material Library使用提供30多個UI組件的組件開發工具包（CDK）。CDK還允許我們使用Angular Material構建我們自己的UI組件庫。
- Angular CLI使用稱為Schematics的技術生成Angular artifacts。如果您決定創建自己的模板，那麼Angular團隊已經ng-add 在Angular-CLI中添加了該 命令，讓用戶可以在Angular應用程式中下載並安裝新軟體包。
- 如果用戶想要將他們的Angular應用程式從Angular 5升級到Angular 6，Angular團隊增加ng-update 了對其Angular-CLI的支持， 這可以讓用戶更新和升級軟體包。
- Typescript的2.6版本resolveModuleName開始要求傳入的路徑由「 /' 分隔，而不是」能夠處理\「。
- 改進的裝飾器錯誤消息。
- 啟用最小CLI命令render3應用程式的大小跟蹤。
- Angular團隊決定將長期支持（LTE）擴展到從v4開始的所有主要版本。
- Web pack模塊捆綁器已更新至版本4，並提供Angular CLI支持。
