すっかり社内では Angular アップデート芸人と化している私ですが、
今回は Angular 16 から 17 へのアップデート時に走る angular/core に関するマイグレーションの中身を軽く眺めてみます。
いや、17 から 18 じゃないんかーいという声もあるかと存じますが、それはまた別の記事でネタにさせていただきやす。

ちなみにアップデートを行う際は、上記公式アップデートガイドに沿って進めることを推奨します。Application complexity はプロジェクトによりますが、基本的には Advanced でいつも確認するようにしています。

また 16 から 17 へのアップデートに必要な node 等の条件は以下の通り

node.js v18.13.0 以上
TypeScript v5.2 以上
Zone.js v0.14.x 以上

まあ、node 以外はng updateする際に勝手に更新してくれるので、前もってあげておくとかは別にしなくても実はいいのです。

本題

では、ng updateコマンドで angular/core を 17系に更新していきましょう

ng update @angular/core@17 @angular/cli@17

@angular-eslint/schematicsや@angular-builders/jestなど、プロジェクトでお使いの @/angular 関連の依存関係によっては、ng updateしてあげる対象が変わってくる場合がありますので、適宜ご確認ください。

以下、実行例（マイグレーション部分のみ抜粋）

** Executing migrations of package '@angular/core' **

❯ Angular v17 introduces a new control flow syntax that uses the @ and } characters.
  This migration replaces the existing usages with their corresponding HTML entities.
UPDATE projects/app/src/shared/header/header.component.html (2707 bytes)
  Migration completed (1 file modified).

❯ Updates `TransferState`, `makeStateKey`, `StateKey` imports from `@angular/platform-browser` to `@angular/core`.
  Migration completed (No changes made).

❯ CompilerOption.useJit and CompilerOption.missingTranslation are unused under Ivy.
  This migration removes their usage
  Migration completed (No changes made).

❯ Updates two-way bindings that have an invalid expression to use the longform expression instead.
  Migration completed (No changes made).

一つずつ見ていきましょ

対象のプロジェクトによってangular/cliやcdkのマイグレーションが含まれている場合がありますが、今回は core に絞った内容でお送りしています。

Angular v17 introduces a new control flow syntax that uses the @ and } characters.This migration replaces the existing usages with their corresponding HTML entities.

Angular 17 から新しく組み込みの制御フロー構文が追加されています。
ngIf ngFor ngSwitch が @if @for @switch で書けるようになったアレです。

なんかマイグレーションメッセージの冒頭だけ見ると、新しく組み込みの制御フローに置き換えてくれてそうに見えるのですが、実際そうではなく、今後新しい制御フロー構文で @ { } を使うので、HTMLテンプレート内で既に使われてるこれら文字列がある場合は、HTMLエンティティに置き換えるよという内容になっています。

極端な例ですが

<!-- Before -->
<p>@</p>

<!-- After -->
<p>&#64;</p>

エディタ上でも今後は指摘してくれるようになっていますね

FYI：

ちなみに新しい制御フロー構文へのマイグレーションはちゃんと用意されているので、移行を考えている方はそちらを試してみることをおすすめする

Updates `TransferState`, `makeStateKey`, `StateKey` imports from `@angular/platform-browser` to `@angular/core`.

これは書いてある通り、TransferState makeStateKey StateKey のインポート元が@angular/platform-browser から @angular/core に変更されたので、これらのインポートを自動的に更新してくれます。

// Before
import { TransferState, makeStateKey, StateKey } from '@angular/platform-browser';

// After
import { TransferState, makeStateKey, StateKey } from '@angular/core';

CompilerOption.useJit and CompilerOption.missingTranslation are unused under Ivy.

Angular の Ivy コンパイラでは、CompilerOption.useJit と CompilerOption.missingTranslation が不要になったので、設定がある場合は自動で削除してくれます。

// Before
{
  "compilerOptions": {
    "useJit": true,
    "missingTranslation": "ignore"
  }
}

// After
{
  "compilerOptions": {}
}

Updates two-way bindings that have an invalid expression to use the longform expression instead.

無効な式を持つ双方向バインディングを検出し、長形式の表現に置き換えます。これにより、バインディングの正確性と可読性が向上するとのこと。ここで言ってる無効な式とは、Angular のコンパイラが正しく解釈できない場合を指しているようです。

例を見ると、こんな感じに変換してくれるっぽいですね。

Before

import {Component} from '@angular/core';

@Component({
  template: `<input [(ngModel)]="a && b"/>`
})
export class MyComp {}

After

import {Component} from '@angular/core';

@Component({
  template: `<input [ngModel]="a && b" (ngModelChange)="a && (b = $event)"/>`
})
export class MyComp {}