# Angular 18 更新內容

## zoneless 相關

- zoneless變更檢測api（完全移除zone.js下執行應用）( Experimental )
- 以往是靠 zone.js 實作變更檢測，這次推出了一系列實驗性的 api，使變更檢測不依賴 zone.js，整體效能和開發體驗更佳。
- 使用實驗性api的步驟
1. 在 應用啟動部分的`providers`加入 `provideExperimentalZonelessChangeDetection` 設定:

          bootstrapApplication(App, {
            providers: [
              provideExperimentalZonelessChangeDetection()
            ]
          });

2. 在 `angular.json` 的 polyfills 移除 `zone.js`
- 帶來的好處
- 增進微前端的可組合性(模組化)以及和其他框架的可操作性
- 更快的渲染
- 更小的檔案大小，更快的頁面載入
- 更易讀的 stack traces
- debug上更容易
- 文件中提到實際帶來的影響
- async/await將會是原生的
- 原本因為zone.js無法捕捉到這個api，所以angular中的async/await其實是promise。
- material 和 cdk 與此功能相容
- 更詳細的手冊 [Zoneless • Angular](https://angular.dev/guide/experimental/zoneless)
- v18專案預設 coalescing (混合變更監測)
- coalescing = 融合，若專案使用zone.js 的變更檢測，裡面的一個設定。
- 如果開啟，變更檢測將 "by scheduling a animation frame" 的方式非同步觸發。
- 會減少變更檢測的次數。
- 開啟方式:

      bootstrapApplication(App, {
        providers: [
          provideZoneChangeDetection({ eventCoalescing: true })
        ]
      });

- 詳情需看: [NgZoneOptions • Angular](https://angular.dev/api/core/NgZoneOptions#eventCoalescing)
- https://angular.dev/api/core/NgZoneOptions#eventCoalescing
- 如果組件採用`ChangeDetectionStrategy.OnPush`，則也與zoneless兼容
> If your components are compatible with Angular’s `ChangeDetectionStrategy.OnPush` change detection strategy, they should be mostly compatible with zoneless as well which will make their transition seamless!

## hydration 相關
- Hydration = 水合，也就是從伺服器端的靜態HTML轉可互動元素的過程
- event replay (hydration過程中使用者引起的event，將保留到hydration完成後執行) ( Developer preview )
- 「Wiz」框架中的「event dispatch」函式庫
- 我們引入了人工加載延遲，以模擬非常慢的網絡連接。假設在頁面加載且尚未進行水化的過程中，用戶希望將多個耳機添加到購物車中。如果頁面尚未進行水化，因此不可互動，所有用戶事件將會丟失。從 v18 開始，使用事件分發，Angular 將開始記錄用戶事件。一旦應用程序完成水化，事件分發將重放這些事件，結果我們將在購物車中看到六個項目。
- 開啟方式: `withEventReplay()`

      bootstrapApplication(App, {
        providers: [
          provideClientHydration(withEventReplay())
        ]
      });

- devtool 支援 hydration 視覺化
- angular的devtool，點擊 「show hydration overlay」按鈕，可以看到哪些元件已經處理、被略過或發生錯誤
- 對Material 3 的支援
- 已用來更新 material的官網，同時它的組件也支援Hydration 的 devtool
- 對i18n的支援 ( Developer preview)
- 對angular material 和 CDK更全面的支援
- v17 時某些 angular material 和 CDK 被排除在水合過程之外，這導致它們需要重新渲染。從第 18 版開始，所有組件和原語(primitives)都完全支持水合。

## API
- `@defer` 已穩定 (v17推出的功能)
- 新的流程控制語法 (`@if`, `@for`等)已穩定 (v17推出的功能)
- v17 時宣布 application builder 穩定並預設於新專案 (以 Vite + esbuild 取代 wabpack)。現在，用指令升級專案到 v18 時，會被詢問是否使用 application builder，詳細指令中做了什麼可以參考 [Migrating to new build system • Angular](https://angular.dev/tools/cli/build-system-migration#automated-migration-recommended)
- `ng-content` 可以預設內容

- `FormControl`, `FormGroup` 和`FormArray` 匯出了新的屬性: `event`，可以用它一次追蹤 value, touch state, pristine status, 和 the control status.
- `redirectTo` 接受傳入函式了
- [Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | Angular Blog](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe#7fb8:~:text=Route%20redirects%20as%20functions)
- Signal inputs ( Developer preview )
- [Inputs as signals • Angular](https://angular.dev/guide/signals/inputs)
- Model inputs ( Developer preview )
- [Model inputs • Angular](https://angular.dev/guide/signals/model#)
- viewChild、viewChildren ( Developer preview )
- 同ViewChild、ViewChildren，但輸出結果會是Signal
- `@let`: 在模板上儲存表達式結果並可複用 (v18.1) ( Developer preview )
- 在模板上宣告
- `@let value = 10;`
- `@let` 之後跟著1到多個空白(不包含新行)
- 用`;`結尾
- [Introducing @let in Angular. Authors: Mark Thompson, Kristiyan… | by Angular | Jul, 2024 | Angular Blog](https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f)
- 比如說和`async` pipe 結合使用，不用擔心多次訂閱問題

## 其他
- Typescript upgraded to 5.4