BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Angular v12 Released, Transitions to Ivy Rendering Engine

Angular v12 Released, Transitions to Ivy Rendering Engine

Bookmarks

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.

bar graph of applications opting out of Ivy

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.

We need your feedback

How might we improve InfoQ for you

Thank you for being an InfoQ reader.

Each year, we seek feedback from our readers to help us improve InfoQ. Would you mind spending 2 minutes to share your feedback in our short survey? Your feedback will directly help us continually evolve how we support you.

Take the Survey

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.