在今天早些時候Angular團隊發布了8.0.0穩定版。其實早在NgConf 2019大會上，演講者就已經提及了從工具到差分加載的許多內容以及更多令人敬畏的功能。下面是我對8.0.0一些新功能的簡單介紹，希望可以幫助大家快速了解新版本。
新功能
差分加載
根據您的browserlist 文件，在構建期間，Angular將為其創建單獨的包polyfills。所以基本上你會有：
使用此功能將減小捆綁包大小。
但這是如何工作的？
基本上，Angular將使用polyfill構建其他文件，並且它們將注入nomodule 屬性。
<body>
<pp-root> </ pp-root>
<script type =“text / javascript”src =“runtime.js”> </ script>
<script type =“text / javascript”src =“es2015- polyfills.js ” nomodule > </ script>
<script type =“ text / javascript“src =”polyfills.js“> </ script>
<script type =”text / javascript“src =”styles.js“> </ script>
<script type =”text / javascript“src =”vendor .js“> </ script>
<script type =”text / javascript“src =”main.js“> </ script>
</ body>
nomodule屬性是一個布爾屬性，用於阻止腳本在支持模塊腳本的用戶代理中執行。這允許在現代用戶代理和舊用戶代理中的經典腳本中選擇性地執行模塊腳本.
SVG作為模板
您現在可以將SVG文件用作模板。到目前為止，我們只能選擇使用內聯HTML或外部HTML作為模板。
@Component({
selector: "app-icon",
templateUrl: "./icon.component.svg",
styleUrls: ["./icon.component.css"]
})
export class AppComponent {...}
Ivy渲染引擎實驗
雖然早在angular 6的時候就提出了Ivy，但是Ivy仍處於試驗階段，通過Angular 8版本，您可以通過創建一個enable-ivy標志設置為true 的應用程序來測試它，如下所示。它不是完全正常運行（選擇預覽），正如Igor Minar在ngConf 2019中建議的那樣，視圖引擎仍然推薦用於新應用。
To enable Ivy in an existing project set enableIvyoption in the angularCompilerOptions in your project’s tsconfig.app.json
要在現有項目中使用Ivy的話，需要在tsconfig.app.json文件中設置angularCompilerOptions選項的enableIvy屬性
“angularCompilerOptions”： {“enableIvy”：true}
您也可以使用新引擎創建新應用程序
ng new my-app --enable-ivy
Ivy將提供以下優勢，Angular 9中預計前3個功能：
- 編譯速度更快（V9）。
- 改進了模板的類型檢查（V9）。
- 較小的捆綁尺寸（V9）（如果您錯過了I / O 19，Vikram Subramanian顯示了一個4.3 KB版本的應用程序）。
- 向后兼容性。
- 我最喜歡的：你可以調試模板（我確信很多開發人員需要這個功能）。
Bazel支持
Bazel是谷歌開源的另一款工具，“我們不喜歡谷歌”。正如Igor Minar所解釋的那樣，Bazel已經在內部使用了很長時間，現在可供所有人使用。您可以參考Bazel文檔，並了解如何將其與Angular一起使用。
你可能想知道：“Bazel准備好了嗎？”簡答：還沒有。目前，它處於“選擇預覽”模式。
Bazel可作為選擇加入，預計將包含@angular/cli在第9版中。
Bazel將提供以下優勢：
- 更快的構建時間（對於第一次構建需要時間，但並發構建將更快），Angular已經在使用它，現在CI在7.5分鍾內完成，而不是在Bazel之前的60分鍾。
- 增量構建：您將能夠僅構建和部署已更改的內容而不是整個應用程序。
- 您可以彈出Bazel文件，默認情況下它們是隱藏的。
您可以使用以下命令添加Bazel支持：
ng add @ angular / bazel
或者，您也可以使用Bazel創建一個新的應用程序：
npm install -g @ angular / bazel
ng new my-app --colection = @ angular / bazel
Builders API
新版本允許我們使用Builders API，也稱為Architect API。
angular使用builders進行主要操作：serve ，build ，test ，lint和e2e 。您可以在angular.json文件中查看使用過的構建器。
...
"projects": {
"app-name": {
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
...
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
...
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
...
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
...
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
...
}
}
}
}
從現在開始，我們可以創建自定義構建器。我認為這是gulp/grunt“舊時代”中的命令。
基本上，構建器只是一個帶有一組命令的函數，您可以createBuilder()從@angular-devkit/architect包傳遞給方法。
import { createBuilder } from '@angular-devkit/architect';
function customBuild(options, context) {
return new Promise((resolve, reject) => {
// set of commands
})
}
createBuilder(customBuild);
您可以在此處查看內置的Angular構建器。
懶加載的變動
新版本不推薦使用loadChildren:string 懶惰加載模塊的語法。
在8.0.0之前，懶加載的使用方法如下：
loadChildren: './lazy/lazy.module#LazyModule';
現在的使用方法如下：
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
如果你有很多的懶加載的模塊，並希望通過軟件包做到這一點，可以點擊此處參考
對AngularJS API中$location的支持
Angular團隊希望為使用AngularJS的所有開發人員提供支持，並幫助他們升級到Angular。該團隊現在在升級時添加了對$ location服務的支持。添加了angular/common/upgrade這個新包。
- 允許從位置服務檢索狀態的功能。
- 添加跟蹤所有位置更改的功能。
- 它將允許您讀取hostname protocol port searchAngularJS中可用的屬性。
- MockPlatformLocation 添加了API以測試位置服務。
Web Worker
Angular 8中添加了Web worker支持。現在，您可以添加Web worker並將要在后台運行的耗時進程委派給Web worker。運行以下命令以使用Angular CLI生成新的Web worker：
ng g webWorker <name>
Service Worker
隨着PWA的使用日益增長，對Service Worker進行了許多改進。
- 一項改進是SwRegistrationOptions增加了選項。
- 在一個域中支持多個應用。
- 閱讀Angular Doc上有關服務工作者的更多信息。
表單改進
- 添加了markAllAsTouched方法以標記所有的控件FormGroupas as touched。如果要觸發一個表單組中所有控件的驗證，這個方法將是非常有用的。之前我們不得不使用下面的代碼片段來實現相同的功能：
validateFormAndDisplayErrors(form: FormGroup) {
Object.keys(form.controls).map((controlName) => {
form.get(controlName).markAsTouched({onlySelf: true});
});
}
- 從FormArray中清除所有元素
以前要刪除所有元素，formArray 我們必須循環刪除第一個元素直到空：
while（formArray.length）{
formArray.removeAt（0）;
}
現在就不需要那樣操作了，直接使用clear方法就可以完成：
formArray.clear()
對Typescript 3.4.x的支持
Angular現在使用TypeScript 3.3（v7使用3.2.x）。沒有太多突破性的變化 - 所以你可能應該做得很好。你可以在這里查看。
性能改善
為每個請求ServerRendererFactory2創建一個新的實例DomElementSchemaRegistry，這是非常昂貴的。現在它將共享全局實例DomElementSchemaRegistry.
棄用的API
從 @angular/platform-browser中刪除了已棄用的DOCUMENT
從@angular/platform-browser中移除了DOCUMENT。如果您使用DOCUMENT from @angular/platform-browser，則應從此處開始導入@angular/common。
@angular/http
@angular/http在Angular 5中不推薦使用package，但由於@angular/platform-server依賴於它，所以仍然可用。從現在它已從包列表中刪除。
配置ViewChild / ContentChild查詢的時間
使用此功能時，必須提供靜態標志以定義何時需要解析ViewChild和ContentChild實例。
使用此功能時，必須提供靜態標志以定義何時需要解析ViewChild和ContentChild實例。
// Ensure Change Detection runs before accessing the instance
@ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInt hook
@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;
以上功能不適用於ViewChildren或ContentChildren。它們將在變更檢測運行后解析。
需要注意的是，設置static: true將不允許您從動態模板分辨率（例如*ngIf）獲得結果。
添加了原理圖支持以將現有代碼遷移到此語法，因為將使用此語法Ivy 。您可以運行ng update @angular/core以遷移現有代碼。
Angular Material
Angular Material工程重命名為Angular Components。包還是跟以前保持一樣的。
結論
以上就是angular 8版本的一些改動。總體來說變化不是很大，延續了angular每年一個穩定版的習慣。
原文鏈接