Angular v12がリリースされ、Ivyレンダリングエンジンに移行

原文(投稿日：2021/05/14)へのリンク

Angular TeamのディベロッパーアドボケートであるMark Techson氏は、最近Angular v12のリリースを発表した。Angular 12はView Engine（現在は非推奨）からの移行である。Protractorは、新しいAngularプロジェクトには含まれない。AngularコンポーネントはさらにインラインSassをサポートするようになる。

Angularが、コンパイルおよびレンダリングパイプラインのIvyへの移行を完了する準備をしている。そのため、View Engineは非推奨になり、将来のメジャーリリースで削除される予定である。この動きは、まだ自身の開発物をIvyに移行していないライブラリ開発者が、移行を始めるための合図である。Angularチームはブログ記事で、レガシーレンダリングパイプラインを使用しているユーザはほとんどいないと説明した。

テレメトリで--enableIvyフラグの使用法を見ると、現在、アプリケーションの大部分がIvyを使用していることがわかりました。そのため、--enableIvyフラグを削除し、View Engineを非推奨にできます。Ivyアプリケーションは、互換性コンパイラのおかげでView Engineライブラリに依存することができます。

現在、View Engineを使用しているライブラリは、引き続きIvyアプリで動作する。チームは次のように説明している。

あなたがライブラリ開発者で、まだIvyに移行する準備ができていなければ、v12でtsconfig.lib.prod.jsonを更新してください。

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
 "extends": "./tsconfig.lib.json",
  "compilerOptions": {
  "declarationMap": false
},
"angularCompilerOptions": {
  "enableIvy": false
  }
}

Angular 12コンポーネントは、@ComponentデコレータのstylesフィールドでインラインSassをサポートするようになった。この機能は、package.jsonファイル（"inlineStyleLanguage": "scss”）で有効にする必要がある。リリースノートには、次の例が記載されている。

// Here's an example of the before and after.
// BEFORE

@import '~@angular/material/theming;

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  )
));

@include angular-material-theme($theme);

// AFTER
@use '~@angular/material' as mat;

@include mat.core();

$primary: mat.define-palette(palette.$indigo-palette);
$accent:  mat.define-palette(palette.$pink-palette);

$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  )
));

@include mat.all-component-themes($theme);

Protractorのエンドツーエンドテストフレームワークは、新しいプロジェクトに含まれなくなる。チームは、代わりの一般的なソリューション（Cypress、WebdriverIO、TestCafeなど）の使用について報告している。

リリースノートには、Angular 12に伴う変更の完全なリストが含まれている。Angularは、MITライセンスの下で利用可能なオープンソースソフトウェアである。Angular GitHubリポジトリを介した貢献を歓迎する。