One of the key factors behind the popularity of Angular as a web development framework has always been its adaptability and flexibility. It’s only natural for open-source technologies to change at an increasing pace given that such a huge community of developers is willing to contribute to its growth. Led by the Angular Team at Google, the framework is becoming more and more popular with each new version.
So, what can developers expect to get in the latest version of Angular - Angular 12? Read on to find out.
Table of contents:
- What's the latest Angular version?
- Angular 12 new features
- Summary of all latest Angular version new features
What's the latest Angular version?
The team behind Angular practically releases a new major version of this incredibly widespread TypeScript-based web framework every six months. The latest iterations are Angular 12 released in May 2021 and Angular 12.1 that arrived on June 24. The new version of Angular fixes a lot of things and adds support for the compiler.
Angular 12 new features
1. Improvements in CSS
Developers can now use Sass inline in the styles field of the @Component decorator. If this sounds interesting to you, note that you first need to enable this behavior by adding "inlineStyleLanguage": "scss” to the angular.jsonconfig file.
Angular CDK and Angular Material now internally adopted the Sass new module system. So, if your app uses Angular CDK or Angular Material, you need to switch from node-sass to the sass npm package. The node-sass package is not maintained anymore and doesn’t keep up with the new feature additions to the Sass language.
When updating to Angular 12, applications will automatically switch to the new Sass API - all it takes is updating the application with the ng update. The command refactors any Sass @import statements for Angular CDK and Angular Material code.
Another novelty is support for Tailwind CSS. Now supported by Angular CLI natively, Tailwind can be installed with npm install -D tailwindcss. All that’s left now is creating a TailwindCSS configuration file in your workspace (or project root) - and you’re done! You can now use Tailwind classes throughout your project.
2. Browser extension for Angular DevTools
One of the most commonly used browser extensions for debugging Angular applications is Augury. It has served developers for a good few years by now. But with Angular 12, you get something new: the Angular DevTools, a Chrome DevTools extension developers can use to inspect the structure of their application and profile its performance.
Take a look at the Angular DevTools and you’ll see that it all starts with a component tree view that shows all of the component inputs, outputs, and class properties. You can edit component properties manually in the dev tools and see the results live in your browser. This is the fastest and easiest way to test multiple scenarios in an application.
The second tab is a profiler that records different use cases of the application and allows developers to check the impact of these scenarios on their application’s performance. The profiler also indicates how much time is dedicated to which component or directive at every step of the way. This will help teams a lot in troubleshooting performance issues.
3. New version of TypeScript
Angular 12 uses TypeScript 4.2. What does this mean for developers? That they get to benefit from all the recent improvements added to this language like:
- Enhanced type alias preservation,
- Stricter checks for the in Operator,
- Breaking changes,
- More relaxed rules between Optional Properties and String Index Signatures.
4. Availability of the Nullish Coalescing operator in templates
The Nullish Coalescing operator is now available in Angular HTML templates. What does this mean? That a complex expression like this one:
{{ value!== null && value !== undefined ? value : defaultValue }}
Can now be simplified into:
{{ value ?? defaultValue }}
This added simplicity is going to help developers accelerate the speed of coding, become more efficient, and get faster at reviewing or debugging code.
5. Deprecation of the View Engine
Angular is getting rid of the View Engine - it’s going to be removed in a future major release. The current libraries using View Engine will still work with Ivy apps, so developers don’t get any extra workload related to this change. However, the authors of these libraries do because they need to figure out how to transition to Ivy.
6. Transition from Legacy i18n Message IDs
At the moment, Angular has multiple legacy message ID formats used in the i18n system. But they tend to cause problems related to the whitespace, formatting templates, and ICU expressions. To solve this issue, the Angular Team decided to migrate away from them.
Now the new canonical message ID format is more resilient and intuitive. It helps to reduce the unnecessary translation invalidation and retranslation cost in applications in which translations might not match because of things like whitespace changes.
Since version 11 of Angular, new projects are configured to use the new message IDs automatically. Angular now introduced the tooling to migrate the existing projects with existing translations.
7. The future Protractor isn’t clear yet
The Angular Team is now working with the community to determine the future of Protractor. For now, it’s not included in new projects where you get some options provided by popular third-party solutions in the Angular CLI. Angular works with Cypress, WebdriverIO, and TestCafe to help developers adopt these alternatives.
8. Learning Angular will be easier
The team is always busy improving the learning experience for developers looking to fine-tune their Angular skills. That’s why the documentation is being improved as well. For example, the team behind Angular wrote a content projection guide and added a helpful contributor’s guide to help the community members wishing to improve the docs.
9. Running ng build defaults to production
This is a huge time saving for new v. 12 projects! Developers can skip a few steps and avoid accidental development builds in production. Note that this feature works only for new projects and Angular tooling doesn’t provide any automatic migrations.
10. Strict mode enabled by default in the CLI
Why is that important? Strict mode helps to identify errors earlier in the development cycle. So, developers have an easier time writing code and can accelerate the process confidently.
11. Support for Webpack 5
In Angular 11, the team added experimental support for Webpack 5. Now, Angular has a production-ready version of Webpack 5 support.
12. Support for IE11 is deprecated
Angular keeps up with the evolving web ecosystem, so it’s only natural that it removes support for legacy browsers and focuses on supporting modern solutions that are most relevant to developers and end-users. Angular will include a new deprecation warning message, and the team will remove support for IE11 in Angular 13.
Summary of all latest Angular version new features
As you can see, the Angular Team is on the right track in providing developers with a framework that supports them in every project. This host of new features makes using Angular even easier and builds upon the core strengths that led it to the forefront of web development technologies.
Are you planning to use Angular 12 in a new project? Have you used Angular before? What do you think about these new features?
Share your thoughts in the comments; we look forward to hearing from developers and team leaders on where they think Angular will go next.
