Angular 13 Tag

What’s new in Angular 13

The new release of Google’s popular TypeScript-based web framework is available now.

This post will bring you closer to the most important new features and breaking changes in Angular 13 and help you decide whether an update for your project is worthwhile.

Goodbye View Engine – 100% Ivy

Angular has introduced its next-generation compilation and rendering pipeline Ivy since its version 8. Angular 9 has used Ivy by default while maintaining support for the predecessor compiler and runtime View Engine.

The new version of the framework is now 100 percent Ivy.

To streamline and modernize the Angular Package Format (APF), View Engine specific metadata and older output formats are now removed, which will reduce maintenance costs and the complexity of the codebase in Angular 13. All internal tools are converted to Ivy beforehand so that the change should work smoothly.

Ivy compiles individual components more independently of one another, which improves development times. The use of ngcc (Angular compatibility compiler) is no more required for libraries built with the latest version of the APF. This will offer a faster execution for libraries developers.

Ergonomic APIs

The load time is reduced in Angular 13 with the help of ergonomic code-splitting APIs and granular code breakdown at a component level.

A performance improvement was also achieved with the introduction of ESBuild, an extremely fast JavaScript bundler. ESBuild works now with terser to optimize global scripts and supports CSS sourcemaps, which enables optimized global CSS.

The time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.
Pic courtesy: betterprogramming.pub

No More Support for IE11

To benefit from native web APIs and modern browser features such as web animations and CSS variables, the Angular team has removed the Internet Explorer 11 support.

This offers a smaller bundle size and faster load for apps and an improved user experience because of the absence of IE-specific polyfills and the no need for differential loading.

This breaking change will certainly affect authorities or institutions that still use IE 11 and have not yet switched to Microsoft Edge or other modern browsers.

Update of Component API

You can now create dynamic components with less boilerplate code thanks to an improvement of ViewContainerRef.createComponent API.

Here is the old way of creating a dynamic component:

export class InquiryDialog implements OnInit {

  componentRef: ComponentRef;
  @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;

  constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData, private componentFactoryResolver: ComponentFactoryResolver) {}
              
  ngOnInit(): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.inquiryPageComponent);

    this.componentRef = this.container.createComponent(componentFactory);   
  }
}

And with Angular 13, there is no need to use ComponentFactoryResolver:

export class InquiryDialog implements OnInit {

  componentRef: ComponentRef;
  @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;

  constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData) {}
              
  ngOnInit(): void {

    this.componentRef = this.container.createComponent(this.data.inquiryPageComponent);   
  }
}

Angular 13 way of creating a dynamic component

Improved Debugging and Test Times

TestBed is the primary unit tests API for Angular applications and libraries.

In order to decrease the test time in TestBed, the new version is released with an improved test API. The framework can now set up and tear down the test environment and learn the DOM automatically after each test run. This leads to faster, less memory-intensive, and better-isolated tests.

New Type for Forms

Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:

• The type of AbstractControl.status, for example, is now FormControlStatus instead of string.
• And the type of StatusChanges is Observable<FormControlStatus> instead of Observable<any>.

Router

• There is an improvement for the router so that it will not replace the browser URL when new navigation cancels ongoing navigation.
• There is a proposition to fix an incorrect parsing for navigation. This happens when the default URL serializer drops everything afterward like a question mark in query parameters: /users?start=1?&pages=15
• You can add missing outlet events to RouterOutletContract, which is useful when the module federation renders components dynamically at some point in the future.

Accessibility (A11y)

There is an Accessibility (A11y) improvement in Angular Material: all Material Design Components (MDC) have been checked for better Accessibility.

Checkboxes and radio buttons, for example, have now larger touch sizes, and other components have better high contrast modes.

A comparison of touch target sizes. The sizes on the right are the new sizes.

A comparison of touch target sizes. The sizes on the right are the new sizes.
Pic courtesy: betterprogramming.pub

Other Changes

• The framework core now supports TypeScript version 4.4.
• Version 7 of the reactive programming library RxJs (Reactive Extensions for JavaScript) is now supported.
• Inlining fonts speed up the First Contentful Paint (FCP), which can improve the web performance. That’s why the team has introduced now support for inlining Adobe Fonts just like they did for inlining Google Fonts in Angular 11.
• We can disable or enable built-in validators such as min, max, and minLength dynamically.
• We can set custom conditions in ng_package.
• There is an improvement of error messages, like the error about “a missing animation trigger” for the platform-browser.
• Clear service worker cache in the safety worker. This ensures that broken or stale content will not be served in future requests.
• Improvement for the localization API. You can check the documentation for $localize.

For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Angular, please visit our technology page.

Content Source:

1. betterprogramming.pub