Angular v12 Released, Transitions to Ivy Rendering Engine

Mark Techson, developer advocate on the Angular Team, recently announced the release of Angular v12. Angular 12 transitions away from View Engine (now deprecated). Protractor is no longer included in new Angular projects. Angular components will additionally now support inline Sass.

As Angular prepares to complete its move to Ivy, its compilation and rendering pipeline, View Engine is deprecated and will be removed in a future major release. The move is a signal for library authors who haven’t done so to start transitioning their work to Ivy. The Angular team explained in a blog article that few users are using the legacy rendering pipeline:

Looking at the usage of --enableIvy flag in our telemetry, we saw that the vast majority of applications are currently using Ivy, which allows us to remove the --enableIvy flag and deprecate View Engine. Ivy applications can depend on View Engine libraries thanks to our compatibility compiler.

At present, libraries using View Engine will nonetheless continue to work with Ivy apps. The team explains:

If you’re a library developer and you’re not ready to move to Ivy just yet, in v12 update your tsconfig.lib.prod.jsonto:

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

Angular 12 components now support inline Sass in the styles field of the @Component decorator. The feature needs to be enabled in the package.json file ("inlineStyleLanguage": "scss”). The release note provides the following example:

// 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);

The Protractor end-to-end test framework will no longer be included in new projects. The team reports working with alternative popular solutions (e.g., Cypress, WebdriverIO, TestCafe).

The release note contains the full list of changes coming with Angular 12. Angular is open source software available under the MIT license. Contributions are welcome via the Angular GitHub repository.