Angular 13: Everything You Need to Know About This Version

Angular 13’s latest version of the web framework is available for download. If you haven’t already updated to the new version, now is the time to do so. Angular 13 is packed full of useful features that will improve and enhance the way you work. Some popular elements have been revised to make them even better, while some lesser-used features have been dropped completely.

Still not convinced it’s time to upgrade to Angular 13? Here’s an overview of everything the new version contains, as well as simple instructions to help you update the platform when you’re ready.

What Is Angular?

If you’re new to coding, you may not be sure what Angular is. Angular is a development platform built on TypeScript. It includes:

• A component-based framework that allows you to build scalable web applications
• An assortment of well-integrated libraries covering a wide collection of features, such as forms management, routing, client-server communication, and more
• A comprehensive suite of developer tools you can use to build, develop, test, and update your code

With the help of Angular, you can leverage a platform that can be used for everything from single-developer projects all the way up to enterprise-level applications. It’s smartly designed to make updating as simple as possible, empowering you to take advantage of the newest developments with the least effort. Comprising a group of more than 1.7 million content creators, library authors, and developers, Angular is remarkably diverse and content-heavy.

What Are the New Features in Angular 13?

Angular 13 comes with many great new features that put you in the driving seat. Some of the new elements allow you to customize your programming experience, while others streamline the development process, allowing you to develop more apps in less time.

TypeScript 4.4 Support

In Angular 13, support for TypeScript 4.4 is available. This means all versions prior to TypeScript 4.4.2 are no longer supported. There are many advantages to using TypeScript 4.4, including:

• Faster incremental builds
• Default catch variables
• Improved detection of type guards
• Ability to analyze control flow of conditions
• Symbol and template string pattern index signatures

Version 7.4 of RxJS

Angular 13 introduces RxJS, a reactive extension for JavaScript. The new addition includes every version of RxJS, up to and including version 7. For any apps made using ng new, RxJS 7.4 will become the default when using Angular 13.

You’ll need to manually update any existing RxJS version 6 apps with the npm install [email protected] command. We recommend using RxJS version 7 for all new projects and RxJS 6 whenever you’re migrating existing projects.

Router Changes

Routing allows you to easily manage navigation between one view and another. It does this by interpreting a browser URL as an order to change the view.

With Angular 13, the router no longer replaces the browser URL when new navigation replaces current navigation. This change helps avoid compatibility issues that were present in previous Angular versions due to query parameters.

For example, in Angular 12, the default URL serializer would drop everything after a question mark was present in query parameters. In Angular 13, query parameter compatibility has been improved and the question mark will remain.

In past versions, undefined and null routerLink directive inputs were viewed as empty strings. Because of this, there were no mechanisms to block the navigation of the links. In Angular 13, you’re able to set the routerLink to undefined or null, allowing you to disable the navigation entirely.

Angular CLI Enhancements

The Angular CLI is one of the most important parts of the platform and Angular 13 introduces a few enhancements that make using it quicker and easier. The framework in the new version features a persistent build-cache as a default feature.

This useful extra saves built-in results straight to disk, making your development process much faster than in previous versions. If you’re not a fan of this feature, you don’t need to worry. You’re in total control and can disable it or enable it in your existing Angular apps.

Testing Improvements

Testing has become even more efficient and productive with the release of Angular 13. The new update includes some big changes to TestBed, which now correctly dismantles test environments and modules when you’re finished using them.

As the DOM is fully cleared following tests, you can enjoy faster testing processes that are more optimized, less memory-intensive, and less interdependent.

Dynamic Components

Creating dynamic components is also now easier and more streamlined, thanks to Angular 13. ViewContainerRef.createComponent now doesn’t require an instantiated factory to build a component. This means you don’t need to use ComponentFactoryResolver anymore.

Because of the improved ViewContainerRef.createComponent API, you’re now free to make dynamic components using minimal boilerplate code.

Have Any Features Been Removed?

As well as adding a number of great features, the team behind Angular has also removed some features and support with the latest rollout. Everything that’s been removed was done so to reduce costs, increase speed, and reduce memory.

Nothing major has been taken away, but it’s still important to know what’s not included in Angular 13 that was included in previous versions.

Legacy View Engine

Legacy View Engine is not supported by Angular 13. Relying on legacy View Engine was proving to make the latest version of Angular overly complex and expensive, and so the decision to remove it was made. Ivy is now the only view engine that Angular 13 supports.

Because of this change, some existing libraries will be automatically moved to partial compilation mode. Some metadata that used to be required for the legacy View Engine will be removed. All internal tools which were previously used with legacy View Engine have been converted to Ivy for a smooth transition.

With Ivy, you can compile individual components independently, massively improving performance. By dropping the legacy View Engine, Angular 13 is also able to reduce its reliance on ngcc.

IE 11 Support

Angular 13 does not support Internet Explorer 11. This is a step in the right direction, as dropping IE 11 results in faster app loading times and a smaller bundle size. It also means Angular 13 is free to use modern browser features, such as web animations and CSS variables via native web APIs.

Thanks to the lack of IE-specific polyfills and the improved API, apps will load much faster and the need for differential loading will be eliminated. As a developer, you’ll get to enjoy improved infrastructure and APIs, while users will benefit from a better experience and faster loading times.

When you migrate a project, run ng update to automatically reduce the bundle size and remove the IE-specific polyfills.

Node.js Versions Prior to 12.20

No Node.js version prior to 12.20.0 is available in Angular 13. This is due to the new Angular update using the Node.js package export feature with subpath patterns.

How to Update to Angular 13

Convinced that now is the best time to update to Angular 13? Great! The updating process is really simple. Angular doesn’t support migrating across multiple major versions at once. So if you’re using Angular 11 or older, we recommend updating chronologically through the different versions until you get to Angular 12.

To update from version 12: Run “ng update @angular/core@13 @angular/cli@13” which should bring you to Angular 13. Make sure you are using Node 12.20.0 or later.

Don’t forget to ensure everyone who is working on the same project updates to Angular 13 at approximately the same time. This will help avoid errors.

If you have any problems updating to Angular 13, you can find extra help in the Angular update guide.

Angular 13 FAQs:

Still not sure if you’re ready to update to Angular 13? Here are some of the most common questions people have before making the switch to the new version, along with helpful answers so you know you’re making the right decision.

Q1. What is new in Angular 13?

The main new features in Angular 13 are TypeScript 4.4 support, version 7.4 of RxJS, router changes, Angular CLI enhancements, testing improvements, and dynamic components. Many of the Ivy-based features and optimizations have been expanded to help you and your teams build excellent apps.

Overall, the additions to Angular 13 help streamline the development process, allowing you to develop better apps in less time. The new features also fix bugs found in previous versions and give you the freedom to code in a way that better suits you.

Q2. Is React better or Angular?

Angular is best if you’re making an enterprise-grade app and you need to incorporate complicated functionalities, such as native, single-page, and progressive web apps. React is a better choice if you’re creating UI components that can be used in any kind of app, including single-page apps.

This is a really basic explanation. For a more in-depth answer, take a look at our post on the difference between AngularJS and ReactJS.

Q3. What’s the latest in Angular?

Angular 13 is the second-latest edition of the TypeScript-based web framework. Angular 15, the most up-to-date version of the platform. Discover what's new in Angular 15 with this insightful article.