Angular 10 於 2020 年 6 月 24 日正式釋出，距離 Angular 9 僅約 4 個月。這次版本主要聚焦於質量和生態健康：更嚴格的 TypeScript 配置、廢棄舊版依賴、修復大量 bug。

新專案預設開啟嚴格模式

Angular 10 CLI 建立新專案時提供嚴格模式選項：

ng new my-app --strict

嚴格模式會在 tsconfig.json 和 angular.json 中啟用一系列配置：

// tsconfig.json（strict 模式）
{
  "compilerOptions": {
    "strict": true, // TS 嚴格模式
    "noImplicitOverride": false,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true // 模板嚴格檢查（Angular 9 引入）
  }
}

// angular.json（strict 模式下的 budget 配置更嚴格）
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",   // 之前是 2mb
    "maximumError": "1mb"        // 之前是 5mb
  }
]

TypeScript 3.9 支援

Angular 10 要求 TypeScript 3.9，帶來了一些實用改進：

// @ts-expect-error 註釋

// 之前：用 @ts-ignore 壓制錯誤（即使程式碼後來修好了，ignore 還在）
// @ts-ignore
const x: number = "hello";

// TypeScript 3.9：用 @ts-expect-error，如果下一行沒有錯誤會報警告
// @ts-expect-error
const x: number = "hello"; // 有錯誤，正確
// @ts-expect-error
const y: number = 123; // 沒有錯誤！TS 會提示這個註釋是多餘的

條件型別推斷改進

// 3.9 之前，某些聯合型別的條件型別推斷不正確
type IsString<T> = T extends string ? "yes" : "no";
type Test = IsString<string | number>;
// 3.9 之前：'yes' | 'no'（分散式）
// 3.9：仍然是分散式，但某些邊界 case 修復了

廢棄舊版依賴

Angular 10 開始廢棄以下內容（Angular 12 會刪除）：

• ViewEncapsulation.Native → 使用 ViewEncapsulation.ShadowDom
• ModuleWithProviders 的非泛型形式
• ActivatedRoute 的部分廢棄屬性
• 對 IE 9、10 和 IE Mobile 的支援

// ❌ 廢棄
@Component({
  encapsulation: ViewEncapsulation.Native
})

// ✅ 替代
@Component({
  encapsulation: ViewEncapsulation.ShadowDom
})

Date Range Picker（Material UI）

Angular 10 在 Angular Material 中新增了日期範圍選擇器：

<mat-date-range-input [rangePicker]="picker">
  <input matStartDate placeholder="開始日期" />
  <input matEndDate placeholder="結束日期" />
</mat-date-range-input>
<mat-date-range-picker #picker></mat-date-range-picker>

form = this.fb.group({
  dateRange: this.fb.group({
    start: [null],
    end: [null],
  }),
});

升級從 Angular 9

ng update @angular/core@10 @angular/cli@10

# 如果有 Material UI
ng update @angular/material@10

主要遷移內容：

1. 修復 ViewEncapsulation.Native → ShadowDom 的警告
2. ModuleWithProviders<T> 泛型引數補全（CLI 會自動處理）
3. 更新 TypeScript 到 3.9

總結

Angular 10 不是功能驅動的大版本，而是工程質量驅動的版本。嚴格模式預設開啟對新專案來說是非常好的實踐——從一開始就建立正確的型別習慣，比後期遷移成本低得多。