DEV Community

Cover image for ⭐Angular 13 Features ⭐
Sandeep Balachandran
Sandeep Balachandran

Posted on • Updated on

⭐Angular 13 Features ⭐

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

How to update to version 13

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 13

ng update @angular/cli @angular/core
Enter fullscreen mode Exit fullscreen mode

In order to update your global angular,

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

What’s in this release?

✅ 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
  • 👉 Removing View Engine also means that Angular can reduce its reliance on ngcc (Angular compatibility compiler)

✅ Changes to the Angular Package Format (APF)

  • 👉 Libraries built with the latest version of the APF ( 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 being injected into the constructor.
  • 👉 Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without creating an associated factory.

Creating components with previous versions of Angular

Creating components v12

With the new API, this code can become:

Creating components v13

✅ 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
  • 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

✅ Improvements to the Angular CLI

  • 👉 Angular now supports the use of persistent build cache by default for new v13 projects. Read it here
  • To enable this features developers can add this configuration to angular.json:

angular.json config

  • Read more about it here

✅ Framework changes and dependency update

  • 👉 Support for TypeScript 4.4 . Read it here 🎉
  • 👉 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
  • 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)
  • 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

✅ PR merges from community

  • 👉 Dynamically enable/disable validators - #42565 🎉
  • 👉 Making the SwUpdate API a little more ergonomic - #43668 🎉
  • 👉 Language Service config to enable auto-apply optional chaining on nullable symbol - #1469 🎉
  • 👉 Router emit activate/deactivate events when an outlet gets attached/detached - #4333 🎉
  • 👉 Restore history after canceled navigation - #38884 🎉
    • Router flag to restore the computed value of the browser history when set to computed routing changes

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

Top comments (6)

Collapse
 
dsebastien profile image
Sébastien D.

Nice summary!

I've also published a piece about Angular 13: t.co/LCbyXezqly

Collapse
 
hanct profile image
Hanster

Thanks for the summary!

Just to highlight, could be a typo:
The screenshot under "With the new API, this code can become: " The createMyComponent() method, there are duplicates codes this.viewContainerRef.createComponent(MyComponent).

Collapse
 
seromarin profile image
Sebastian Rodriguez

Hi! I want to ask if changes on testing works well with Jest or it's only with Karma?

Collapse
 
sandeepbalachandran profile image
Sandeep Balachandran

Hi 🖐,
It works with both and customizable as well.
You can read about enabling / disabling testing module teardown in Jest and karma right here

Collapse
 
bwca profile image
Volodymyr Yepishev

Ding dong, IE support dropped 🥳

Collapse
 
sandeepbalachandran profile image
Sandeep Balachandran

🎉