What’s new in Angular 12!

Since its first appearance in 2012, Angular has gained an important ground in the frontend’s world technologies as many enterprises are adopting it. This adoption is mainly explained by the way this framework revolutionized interactive web development by including Typescript and also by affording many important features such as routing, data binding, reactive forms, easier tests and a cleaner way to organize presentation code.

Ivy Everywhere

The first major announcement is related to the promotion of ivy by depreciating ViewEngine and disabling the possibility of creating new applications based on it. As per now there are no actions that are required by developers to adapt their old modules.

NB: Ivy is the new compilation and rendering pipeline for angular that was launched with Angular 9 offering a smaller bundle size, faster compilation and easier debugging. The diagram bellows describes the evolution of rendering pipelines for Angular.

Legacy i18n Messages IDs made more resilient

The second change concerns the localization IDs format based on i18n standards, these messages allows Angular translation engine to change your labels based on desired language. These ids were generated automatically and they presented a lot of flaws as they were sensible to any minor change like whitespaces. Angular 11 included a new robust format and Angular 12 came with a set of tools to migrate from the old IDs.

As per Angular documentation there are 2 steps for doing the migration using angular CLI. First you need to execute ng-extract command that will generate a migration file messages.json that developers can use to update their application’s IDs using npx localize-migrate.

What about Styles?

In the previous versions, many developers complained about not being able to write Sass code into single file components and this constraint was imposed by Angular compiler. However such feature was proposed by other frameworks and libraries like React and View. Angular 12 resolved this issue, as we are able to write sass styles in the @component decorator. To enable this you need to add “inlineStyleLanguage”: “scss” into angular.json file.

Due to all the inconvenients that @import statements presented in Sass like the difficulty to identify the exact definition of a variable or a function also the duplicated CSS and the side-effect bugs that comes with it. So Sass team worked on revamping that by creating a new import system using the @use statement. Now Angular CDK and Angular Materials are using this new system. The command ng update in v12 will refactor your Sass @import statements and replace them by @use statements.

Webpack 5, Here we come!

Webpack 5 was released in late 2020 with a set of great updates such as faster builds due to the new persistent cache, smaller bundle size by tree shaking modules and eliminating unused code, a better long term caching. Some angular 11 version included experimentals of Webpack 5 but v12 offered official support to it.

Some Other Cool changes!

• Angular 12 now supports Typescript 4.2.
• Developers are able to use the Nullish coalescing operator in views. Which makes some statements more elegant for example

• Ng build command will run by default a production build. This change will prevent developer from pushing huge development bundles to production environment.
• Strict mode is now enabled by default when creating new projects using CLI.

Thanks For Reading,

Fadi