Angular 8的新特性介紹
新功能
差分載入
根據您的browserlist 檔案，在構建期間，Angular將為其建立單獨的包polyfills。所以基本上你會有：
使用此功能將減小捆綁包大小。
但這是如何工作的？
基本上，Angular將使用polyfill構建其他檔案，並且它們將注入nomodule 屬性。
<body>
<pp-root> </ pp-root>
<script type =“text / JavaScript”src =“runtime.js”> </ script>
<script type =“text / JavaScript 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-ivyIvy將提供以下優勢，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 / bazelBuilders 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構建器。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
懶載入的變動
新版本不推薦使用loadChildren:string 懶惰載入模組的語法。
在8.0.0之前，懶載入的使用方法如下：
loadChildren: './lazy/lazy.module#LazyModule';現在的使用方法如下：
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)