Angular 13 Released: Top New Features and Updates You Need to Know

Angular launched the all-new Angular 13 on November 3, 2021. Considering all the previous releases, we can say it is one of the most streamlined and previously planned upgrades for a broadly accepted TypeScript-based web framework.

The release has brought several essential updates that can be useful for Angular development. If you want a comprehensive view of what’s exclusive in Angular 13, let’s have a glimpse of this version’s top highlights and features with more details!

Top Features and Changes Released in Angular 13

There is a lot to know about the latest version of Angular. So, let’s take a closer look at Angular 13 with all its newly added features and core updates.

1. Support for TypeScript 4.4

Angular v13 now support TypeScript 4.4. It means now we can use many fantastic language features. Moreover, they stopped supporting TypeScript 4.2 and 4.3 also. One breaking change in TypeScript 4.4 that is advantageous for Angular apps is that it no longer implements setters and getters to get a similar type.

2. Enhancements to Angular Tests

The Angular team has made some noteworthy changes to TestBed that currently functions properly to tear down test environments and modules after every test. As the DOM now experiences cleaning after tests, developers can anticipate more optimized, less interdependent, less memory-intensive, and quicker tests.

3. 100% Ivy and No More Support for View Engine

Angular 13 does not support the View Engine. The all-new version is now 100% Ivy. Now that there is no View Engine-specific metadata or older output formats, it eliminates the codebase complicacy and maintenance costs in Angular 13.

The framework has converted all internal tools to Ivy in advance so that this change can function seamlessly. Ivy assembles every component individually, which accelerates development times.

There is no more requirement of using ngcc (Angular compatibility compiler) for the libraries created using the latest APF version. The development team can expect quicker compilation as there is no more requirement for metadata and summary files.

4. Ergonomic APIs

Angular v13 has reduced the load time using ergonomic code-splitting APIs and granular code disruption at a component level. The new release of ESBuild has also brought an enhancement of performance.

ESBuild is a highly rapid JavaScript bundler. Now, it works with terser to optimize worldwide scripts. It supports CSS source maps that allow optimized global CSS also. Moreover, this JS bundler supports other framework languages like Vue, Svelte, and Elm.

5. Angular CLI Enhancements

The Angular CLI is one of the fundamental pieces of the Angular Puzzle. Few developers can handle the complicacy of the modern web development ecosystem in the world, and the Angular CLI safeguards them from most of it.

With the launch of Angular v13, this framework now supports persistent build cache by default. It’s a feature that caches build results on disk. It causes up to 68% enhancement in development speed. You can enable or disable this feature in current Angular apps.

6. Changes to the Angular Package Format(APF)

The Angular Package Format (APF) specifies the format and structure of the Angular Framework packages. It’s a great approach to packaging every third-party library in the web development ecosystem.

Angular 13 brings a new version of the APF, and we find some significant changes in it:

• It creates Ivy partial compilation output.
• There is no more production of UMD bundles.
• It produces ES2020 output.
• It utilizes the package exports with the sub-path pattern feature from Node.js to display several available outputs at every entry point.

7. Changes in Framework and Dependency Updates

Angular 13 also boasts some crucial changes and updates. Now, RxJS v7.4 is the default for applications built with ng new. Current applications utilizing RxJS v6.x will need to update manually using the npm install rxjs@7.4 command.

8. Component API Updates

Now, you can build dynamic components using less boilerplate code due to the improved ViewContainerRef.createComponent API. If you use Angular 13, you don’t have to use ComponentFactoryResolver.

Here’s an example of creating dynamic components using previous versions of Angular:

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

In Angular 13, this code can become using new API:

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

9. No Longer Support for Internet Explorer 11

For enjoying the benefits of native web APIs and features of modern browsers like CSS variables and web animations, the Angular framework has cut off the support for IE11. It provides a quicker load and smaller bundle size for applications and an enhanced user experience as there are no IE-specific polyfills and no requirement for distinctive loading.

It’s a notable change for some institutions or authorities that still run Internet Explorer 11 and haven’t yet moved to Microsoft Edge or other modern browsers.

Read More: Angular 14: All the Important Features and Updates

10. Accessibility Update in Angular Material

The new version of Angular has brought an Accessibility (A11y) enhancement in Angular Material. The team has assessed and checked all MDCs (Material Design Components) for improved accessibility. For instance, radio buttons and checkboxes now have larger touch sizes, and other elements feature higher contrast modes.

11. New Type of Forms

The release of Angular v13 highlights a new type of form: FormControlStatus. It accumulates all status strings for form controls:

• For instance, the type of AbstractControl.status is presently FormControlStatus in place of string.
• The type of StatusChanges is now Observable<FormControlStatus> in place of Observable<any>.

12. Inline Support for Adobe Fonts

The introduction of Angular 13 also highlights inline support for Adobe fonts. These fonts can boost an app’s functionality by accelerating the FCP (First Contentful Paint). Now this change is accessible to everybody by default. You only need to do ng update.

13. Improvements in Localization

$localize is a consistent API. Developers use it to produce an effective way for in-built internationalization (i18n) and tag messages for translation in code and templates.

How to Update to Angular Version 13?

To update to Angular version 13, you need to download Angular 12. Then, you can update to the latest v13 following this link: https://update.angular.io/ for a detailed guide.

Conclusion

The Angular team tries to release a new version update every six months. Now that you know the significant updates and features of the all-new Angular 13, you must give it a try. If you are still using the older Angular v12, it’s time to upgrade it to version 13 to create amazing apps that support modern web development standards.