{"id":21533,"date":"2021-11-09T12:54:00","date_gmt":"2021-11-09T12:54:00","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=21533"},"modified":"2025-10-09T05:14:28","modified_gmt":"2025-10-09T05:14:28","slug":"whats-new-in-angular-13","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/whats-new-in-angular-13","title":{"rendered":"What\u2019s New in Angular 13: Top New Features of Angular 13"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>Considering all the releases taken place in the past, Angular 13 is one of the most organized pre-planned upgrades for the widely adopted typescript-style web framework Angular. By September 24, 2021, the creators of Angular have already designed and released eight different beta versions of Angular 13. <\/p>\n<p>Regarding the latest release of Angular version 13, I will make sure to include everything noteworthy as we did in the previous blogposts of <a href=\"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-12\" target=\"_blank\" rel=\"noopener\">Angular 12<\/a>, <a href=\"https:\/\/www.bacancytechnology.com\/blog\/new-features-in-angular-11\" target=\"_blank\" rel=\"noopener\">Angular 11<\/a>, and <a href=\"https:\/\/www.bacancytechnology.com\/blog\/google-rolls-out-angular-version-10\/\" target=\"_blank\" rel=\"noopener\">Angular 10<\/a>. If you are interested in a bird-eye view of what\u2019s new in Angular 13, then here\u2019s a quick sneak peek at Angular 13 release notes, quick Angular core updates and top new features of Angular 13.<\/p>\n<h2>Quick Highlights of Angular 13<\/h2>\n<p>Angular 13 is officially released on November 03, 2021.<\/p>\n<ul class=\"bullets text-left\">\n<li>100% Ivy = Improved localization API to dynamically create components<\/li>\n<li>RxJS- Reactive Extensions for JavaScript programming library is supported >=7.4<\/li>\n<li>IE11 not supported<\/li>\n<li>Validators such as min, max, and minLengt can be enabled dynamically or disabled<\/li>\n<li>Significant improvement in build-cache by 70%<\/li>\n<li>Easier directives disabling<\/li>\n<li>The error message has been improved<\/li>\n<li>Removing View Engine Support<\/li>\n<li>Improved APF &#8211; faster execution<\/li>\n<li>Angular TestBed improvement<\/li>\n<li>TypeScript >=4.4.x<\/li>\n<\/ul>\n<blockquote class=\"twitter-tweet\">\n<p lang=\"en\" dir=\"ltr\">Angular v13 is here ?<a href=\"https:\/\/twitter.com\/hashtag\/ngUpdate?src=hash&amp;ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">#ngUpdate<\/a> for built-in improvements like:<br \/>&#8211; Faster prod builds<br \/>&#8211; Enhanced component a11y<br \/>&#8211; Improved test times and debugging<br \/>&#8211; Modern Angular Package Format<\/p>\n<p>Read more:<br \/>? <a href=\"https:\/\/t.co\/dx1HzBY9z6\" class=\"broken_link\">https:\/\/t.co\/dx1HzBY9z6<\/a><\/p>\n<p>Join us Friday at 10am PST:<br \/>? <a href=\"https:\/\/t.co\/6GGtgkJDpl\">https:\/\/t.co\/6GGtgkJDpl<\/a> <a href=\"https:\/\/t.co\/ZZqIpja50M\">pic.twitter.com\/ZZqIpja50M<\/a><\/p>\n<p>&mdash; Angular (@angular) <a href=\"https:\/\/twitter.com\/angular\/status\/1456050398020653067?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">November 4, 2021<\/a><\/p><\/blockquote>\n<p> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h2>Angular 13 Features<\/h2>\n<p>Here\u2019s the latest Angular 13 new features that you should to before you upgrade your App to Angular 13.<\/p>\n<h3>(1) 100% Ivy<\/h3>\n<p>The creators and providers of Angular development services wanted to enable quality improvements in dynamic components. With that consideration, API has been simplified. The new API removes <a href=\"https:\/\/v13.angular.io\/api\/core\/ComponentFactoryResolver\" target=\"_blank\" rel=\"noopener\">ComponentFactoryResolver<\/a> with <a href=\"https:\/\/v13.angular.io\/api\/core\/ViewContainerRef#createComponent\" target=\"_blank\" rel=\"noopener\">ViewContainerRef.createComponent<\/a> without producing an associated factory.<\/p>\n<p>Here\u2019s how the components were created with the previous version of Angular.<\/p>\n<pre>@Directive({ \u2026 })\r\nexport class MyDirective {\r\n    constructor(private viewContainerRef: ViewContainerRef,\r\n                private componentFactoryResolver: \r\n                        ComponentFactoryResolver) {}\r\n    createMyComponent() {\r\n        const componentFactory = this.componentFactoryResolver.\r\n                             resolveComponentFactory(MyComponent);\r\n    \r\n        this.viewContainerRef.createComponent(componentFactory);\r\n    }\r\n}\r\n\r\n<\/pre>\n<p>Here\u2019s how new API code can become.<\/p>\n<pre>@Directive({ \u2026 })\r\nexport class MyDirective {\r\n    constructor(private viewContainerRef: ViewContainerRef) {}\r\n    createMyComponent() {\r\n        this.viewContainerRef.createComponent(MyComponent);\r\n    }\r\n}\r\n<\/pre>\n<h3>(2) RxJS 7.4<\/h3>\n<p>Angular v13 update includes RXJS to all the versions upto version 7. New apps created with the CLI will default to RxJS 7.4. In case if you are using RxJS 6 in your existing app, you will have to manually run the command npm install rxjs@7.4 for the latest update.<\/p>\n<h3>(3) No More Support for Internet Explorer<\/h3>\n<p>Angular 13 won\u2019t support internet explorer. If you are planning to hire Angular developer, then you shouldn\u2019t expect anything to create from IE11. <\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #ed781f;box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);text-align: center;\">Are you looking for a helping hand to hypercharge your Angular project but worried about the cost?<br \/>\nCheckout our in-detail guide that covers every aspect of <a href=\"https:\/\/www.bacancytechnology.com\/blog\/cost-to-hire-angular-developer\" target=\"_blank\" rel=\"noopener\">Angular developer cost<\/a> to help you hire right talent without burning a hole in your pocket.<\/p>\n<h3>(4) Changes to the Angular Package Format (APF)<\/h3>\n<p>Angular package format &#8211; APF  has streamlined and modernized older output formats, including View Engine metadata. The updated version of APF does not require the usage of <mark>ngcc<\/mark>. As a result of these changes in the library developers can expect faster execution and leaner package output.<\/p>\n<blockquote class=\"twitter-tweet\">\n<p lang=\"en\" dir=\"ltr\">Angular v13 will ship with the most modern version of APF (Angular Package Format): ES Modules+ES2020<\/p>\n<p>If you&#39;ve ever maintained an npm library, you know how hard it is to come up with the right package format that is modern &amp; works for most use-cases! ?<a href=\"https:\/\/t.co\/A8HPqixfKk\">https:\/\/t.co\/A8HPqixfKk<\/a><\/p>\n<p>&mdash; Igor Minar (@IgorMinar) <a href=\"https:\/\/twitter.com\/IgorMinar\/status\/1455593870851330048?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">November 2, 2021<\/a><\/p><\/blockquote>\n<p> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h3>(5) TestBed Teardown Now Default<\/h3>\n<p>TestBed configuration was added in v12 to conveniently teardown test modules and environment. TestBed teardown is the default feature now, but you can disable and configure it at your ease.<\/p>\n<h3>Documentation Improvements<\/h3>\n<p>$localize is a stable API. $localize is used to create a more efficient method for built in internationalization (i18n) and tag messages for translation in templates and code! Check out these <a href=\"https:\/\/angular.io\/api\/localize\/init\/$localize\" target=\"_blank\" rel=\"noopener\">$localize docs<\/a> to understand how to make learning and entry easier in Angular!<\/p>\n<h3>Inline Support for Adobe Fonts<\/h3>\n<p>Just like Google fonts- V11, you can inline Adobe fonts as well. For your reference, I have attached Mark Thompson\u2019s video screenshot to speed up the performance for font inline.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/01.jpg\" alt=\"Inline Support for Adobe Fonts\" width=\"1100\" height=\"535\" class=\"aligncenter size-full wp-image-21537\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/01.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/01-300x146.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/01-1024x498.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/01-768x374.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>A screenshot from Mark\u2019s video tutorial on font inlining<\/p>\n<h3>Angular Material Accessibility Improvements<\/h3>\n<p>MDC based Angular Material components have accessibility improvements. Emma Twersky detailed more about improving Angular Component\u2019s accessibility in <a href=\"https:\/\/blog.angular.io\/improving-angular-components-accessibility-89b8ae904952\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">this post.<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/2.jpg\" alt=\"Angular Material Accessibility Improvements\" width=\"1100\" height=\"535\" class=\"aligncenter size-full wp-image-21538\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/2.jpg 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/2-300x146.jpg 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/2-1024x498.jpg 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/11\/2-768x374.jpg 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h3>TypeScript 4.4<\/h3>\n<p><b>TypeScript 4.4 has the full support, and some of the big highlights of TS 4.4 include:<\/b><\/p>\n<ul class=\"bullets text-left\">\n<li>Control Flow Analysis of discriminants and conditions<\/li>\n<li>Template String Pattern Index Signatures<\/li>\n<li>Default Catch Variables (\u2013useUnknownInCatchVariables)<\/li>\n<li>Optional Property (\u2013exactOptionalPropertyTypes)<\/li>\n<\/ul>\n<h2>Angular v13 Performance Improvements<\/h2>\n<p>The latest version of Angular 13 comes with several performance improvements:<\/p>\n<ul class=\"bullets text-left\">\n<li>Opt-in feature is now enabled by default<\/li>\n<li>Improvements to the Angular CLI. There\u2019s 68% performance improvements in build speed usage of persistent build cache by default for new v13 project<\/li>\n<li>Improved build performance to optimize bundles and global scripts.<\/li>\n<li>Incremental builds performance don\u2019t contain any Angular traits like, Component, Directive, Pipe, Injectable, NgModule decorators.<\/li>\n<\/ul>\n<h2>Angular v13 Notable Changes;<\/h2>\n<ul class=\"bullets text-left\">\n<li>Node.js 16 is added in all the node engines by all Angular packages.<\/li>\n<li>The ViewContainerRef.createComponent supports component type directly. The present signature that accepts a ComponentFactory is now deprecated.<\/li>\n<li>The renderModuleFactory from @angular\/platform-server is no more required with Ivy. Instead, renderModule can be used.<\/li>\n<li>The Angular language supports autocompletion for union types in templates.<\/li>\n<\/ul>\n<p>You Might Also Like to Know: <a href=\"https:\/\/www.bacancytechnology.com\/blog\/whats-new-in-angular-14\" target=\"_blank\" rel=\"noopener\">What\u2019s New in Angular 14?<\/a><\/p>\n<h2>Wrapping up<\/h2>\n<p>The angular team makes sure to bring a new version update every six months of the previous one. Angular 12 was introduced on May 12. Now Angular v13 is now available with all sorts of features and updates. Give Angular 13 a try with the power of IVY. If you are using an older version, it\u2019s time to update from Angular 12 to Angular 13 to build great apps that support modern web standards.<\/p>\n<p>You can also leverage our <a href=\"https:\/\/www.bacancytechnology.com\/angular-upgrade-service\" target=\"_blank\" rel=\"noopener\">Angular upgrade service<\/a> to update your existing project to the latest version with minimum disruption.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Considering all the releases taken place in the past, Angular 13 is one of the most organized pre-planned upgrades for the widely adopted typescript-style web framework Angular. By September 24, 2021, the creators of Angular have already designed and released eight different beta versions of Angular 13. Regarding the latest release of Angular version [&hellip;]<\/p>\n","protected":false},"author":146,"featured_media":21591,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989],"tags":[],"coauthors":[2427],"class_list":["post-21533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs"],"acf":[],"modified_by":"Nisarg Bhavsar","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/21533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=21533"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/21533\/revisions"}],"predecessor-version":[{"id":55209,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/21533\/revisions\/55209"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/21591"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=21533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=21533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=21533"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}