⭐Angular 13 Features ⭐
Tags: javascript, angular, beginners, webdev
Published: 2021-11-04 07:18:50

---
title: ⭐Angular 13 Features ⭐
published: true
description: Angular 13 features
tags: javascript, angular, beginners, webdev
series: Angular Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjli6fcvz63cqnlico6t.png
---

Hey there,

Version 13.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

## TL;DR 🙌

✅ **View Engine is no longer available in Angular as of v13**

✅ Changes to the Angular Package Format (APF)

✅ **Component API updates**

✅ End of IE11 support

✅ Improvements to the Angular CLI

✅ Framework changes and dependency updates ( **TypeScript 4.4**, **Rxjs 7.4**)

✅ Improvements to Angular tests

✅ Angular material component updates

✅ PR merges from community

✅ Docs Updated | Docs updating | Docs will be updated




<h1> How to update to version 13</h1>
Visit <a href="https://update.angular.io">update.angular.io</a> for detailed information and guidance. To have the best update experience,

Update to 13
```cmd
ng update @angular/cli @angular/core
```

In order to update your global angular,
``` cmd
npm i -g @angular/cli
```

<center><h2><u>What’s in this release?</u></h2></center>

## ✅ Ivy is the default engine available in  v13 👌
* The Angular team already mentioned they will be removing View Engine from future major releases.
* Read about this from Minko Gechev right [here](https://blog.angular.io/upcoming-improvements-to-angular-library-distribution-76c02f782aa4)
* 👉 Removing View Engine also means that Angular can reduce its reliance on ngcc [(Angular compatibility compiler)](https://angular.io/guide/glossary#ngcc)


## ✅ Changes to the Angular Package Format (APF)
*  👉 Libraries built with the latest version of the APF ( [Angular package format](https://angular.io/guide/angular-package-format)) will no longer require the use of ngcc because of standardization on more modern JS formats such as ES2020.
*  As a result of these changes library developers can expect leaner package output and faster execution
*  Removed older output formats, including View Engine specific metadata from APF in v13
*  update in APF to support Node Package Exports which help developers from inadvertently relying on internal APIs that may change.

## ✅ Component API update 
* Before the changes in Angular v13, dynamically creating components required a lot of boilerplate code.
* 👉 The new API removes the need for [ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver) being injected into the constructor. 
* 👉 Ivy creates the opportunity to instantiate the component with [ViewContainerRef.createComponent](https://angular.io/api/core/ViewContainerRef#createComponent) without creating an associated factory.

### Creating components with previous versions of Angular 

![Creating components v12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp6i32e757rdso7bpmam.png)

### With the new API, this code can become:

![Creating components v13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3rx7um7er85r80mrsyi.png)

## ✅ End of IE11 support 🎉

* This allows Angular to leverage modern browser features such as **CSS variables and web animations via native web APIs**. 
* 👉 Apps will be smaller and load faster because we can remove **IE specific polyfills and code paths**. 
* It also removes the need for [differential loading](https://angular.io/guide/deployment#differential-loading)
* Running ng update will automatically drop these IE-specific polyfills and reduce bundle size during project migration
* 👉 Developers who still need to support IE11 users for existing projects can continue to use Angular v12 and it will be supported until [November 2022](https://angular.io/guide/releases#support-policy-and-schedule)


## ✅ Improvements to the Angular CLI 
* 👉 Angular now supports the use of persistent build cache by default for new v13 projects. Read it [here](https://github.com/angular/angular-cli/issues/21545)
* To enable this features developers can add this configuration to `angular.json`:

![angular.json config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z92061lf28qwjremday6.png)
* Read more about it [here]( https://next.angular.io/cli/cache)



## ✅ Framework changes and dependency update 
* 👉 Support for **TypeScript 4.4** . Read it [here](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/) 🎉
* 👉 **RxJS 7.4** is now the default for v13
* Existing apps using RxJS v6.x will have to manually update using the `npm install rxjs@7.4` command. Migration instructions can be read it [here](https://rxjs.dev/6-to-7-change-summary)
* From angular 11 support for inline google font was introduced  
* 👉 Now in v13 support extended to Adobe Fonts
* Inlining fonts can improve your app performance by speeding up the First Contentful Paint [(FCP)](https://web.dev/first-contentful-paint/) 
* This change is now enabled for everyone by default! All you need to do is `ng update`



## ✅ Improvements to Angular test 
* 👉 TestBed that now does a better job of tearing down test modules and environments after each test
* The DOM is now cleaned after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests    

## ✅ Angular material component updates

* All the MDC-based components have been evaluated to meet elevated a11y standards on areas such as contrast, touch targets, ARIA, and more
* 👉 Pull requests regarding Accessibility (a11y) standard can be read [here](https://github.com/angular/components/pulls?q=is%3Apr+is%3Aclosed+label%3Aa11y)

## ✅ PR merges from community 
* 👉 Dynamically enable/disable validators - [#42565](https://github.com/angular/angular/pull/42565) 🎉
* 👉 Making the SwUpdate API a little more ergonomic - [#43668](https://github.com/angular/angular/pull/43668) 🎉
* 👉 Language Service config to enable auto-apply optional chaining on nullable symbol - [#1469] (https://github.com/angular/vscode-ng-language-service/pull/1469) 🎉
* 👉 Router emit activate/deactivate events when an outlet gets attached/detached - [#4333](https://github.com/angular/angular/pull/43333) 🎉
* 👉 Restore history after canceled navigation - [#38884](https://github.com/angular/angular/pull/38884)     🎉
  *    Router flag to restore the computed value of the browser history when set to computed
   ![routing changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwcdfxy5fu3s2cbhkw5h.png)



For more let us hear it from the creators
 
Credits : <a href="https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296">Official Announcement 😄</a>

Changelog : <a href="https://github.com/angular/angular/blob/master/CHANGELOG.md"> Repository </a>