What’s New in Angular 13? Every Angularite Must Know About It.

Hello Angular Developers. We are back with a new version of Angular, and that is Angular13. Yes, Angular is Google’s popular TypeScript-based web framework that has officially released version 13 on November 4th, 2021.

Without taking too much time, let’s focus on some of the recent updates of Angular13.

Angular 13 is Now 100% Ivy

Yes. You read it right. Angular has come up with a recent production release that mentions “100% Ivy.”

Ivy, an Angular next-generation compilation and rendering engine, has always been excellent support for predecessor ViewEngine.

The primary role of Ivy is to easily compile individual components more independently of one another, which improves development times.

Angular13 now no longer support ViewEngine.

It’s one of the biggest news that Angular has announced. Now, the developers can quickly bolster the application productivity using the Ivy-based features of the Angular platform.

Angular developers can now lessen their dependency on the Angular compatibility compiler (ngcc). It means that there is no need for any metadata and summary files to be included, making it easy and faster compilation.

IE11 Support is No Longer Available

Angular has removed the Internet Explorer 11 support to make it easy for the developers to use native web APIs and modern browser features like web animations and CSS variables.

The Angular developers will find an improved user experience and faster application loading with this update.

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

Angular Package Format v13

The Angular Package Format (APF) is a blueprint of the structure and format of npm packages. It is also the endorsed way of packaging any third-party library in the ecosystem.

Angular 13 has come up with a new APF’s version, and some of the significant changes in it are:

  • Ivy “partial” compilation output is generated.
  • ES2020 output is produced (ESM2020, FESM2020).
  • UMD bundles are no longer built.
  • Use the package exports with the subpath patterns feature from Node.js to expose the available outputs per entry point conditionally.

Component API Updates

Ivy simplifies API and makes it easy for the developers to create components dynamically.

Before the changes in Angular v13, dynamically creating components required a lot of boilerplate code.

Inside the new API of Angular v13, you do not need ComponentFactoryResolver being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent without building an associated factory.

Here’s an example of creating components with 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);
}
}

Angular 13

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

Note:  The code is taken from Github.

Form Changes

A new type called FormControlStatus has been added.

It is the fusion of all feasible status strings for form controls. Most of the applications are expected to consume this change without any error.

Still, if you find any technical issues with this FormControlStatus, then there might be two possibilities:

  • You might be comparing AbstractControl.status with a string; or
  • The app is using statusChanges events as if they were something other than strings.

Also, AbstractControl.status has been constricted from string to FormControlStatus and likewise StatusChanges have been narrowed from Observable<any> to Observable<FormControlStatus>.
Most applications should consume these new types seamlessly, according to the Angular changelog.

Routes

In Angular13, the router will no longer supplant the browser URL whenever new navigation cancels the ongoing navigation. Instead, it will eventually cause URL flicker and is ready to serve only to support some AngularJS hybrid applications.

Instead, hybrid apps that rely on navigationId to the router should subscribe to NavigationCancel events and conduct the replaceState themselves to add navigationId to the router state.

Before going through this change, let’s consider one scenario.

Consider you have the following query parameters:

/path?q=hello?&other=123

The default URL serializer would drop everything after and include a question mark in query parameters. Unfortunately, this gives us a parameter {q: ‘hello’} that is wrong.

Do you know why?

URI specs repudiate everything after 2nd “?” passed in the query.

In Angular13, you’ll find a proposed fix that is solely responsible for parsing the query parameter to {q: ‘hello?’, other: ‘123’}.

This change provides for correct parsing.

For the router, missing outlet events would be added to RouterOutletContract. This will come eventually when specific components are rendered dynamically using the module federation.

Angular CLI Improvements

Angular13 has even come up with impressive updates on Angular CLI.

Here, you’ll find the support for the use of persistent build-cache by default.
This update in Angular CLI will typically result in up to 68% improvement in building speed and ergonomic options.

Along with this, ESBuild is another factor that now works with terser to optimize global scripts. In addition, esbuild supports CSS sourcemaps and can optimize global CSS and optimize.

Other Additional Updates

  • Angular 13 has added a TypeScript 4.4 support.
  • Node.js versions < v12.20 are no longer supported. It’s just due to Angular packages using the Node.js package exports feature with subpath patterns.
  • The rxjs (Reactive Extensions for JavaScript) v7 reactive programming library is supported. If you’re creating new apps with CLI, by default, it will be RxJS 7.4. Consider the case that you are using RxJS 6 in your existing app; you will have to run the command “npm install rxjs@7.4” manually for the latest update.
  • The developers can easily enable or disable the built-in validators like min, max, and minLength dynamically.
  • Error messaging functionality has been improved.
  • $ localize is a stable API for internationalization.
  • The developers can even set custom conditions in ng_package.
  • The behavior of the SpyLocation used by the RouterTestingModule has been changed to match the behavior of browsers.
  • Service worker cache is cleared in the safety worker to ensure stale or broken contents are not served in future requests.
  • For the platform browser, the error message has been improved for a missing animation trigger.
  • Improvements to TestBed enable a better job of tearing down test modules and environments after each test. In the Angular12, TestBed configuration is now added by default to conveniently teardown test modules and environments. Even you can disable and configure it at your ease.
  • For the language service, support would be offered for autocomplete string literal union types in templates.

Final Thoughts

By looking at such impressive updates of Angular13, you must have set up your mind to use the latest version.

Still, are you not upgraded to the latest one? What are you waiting for?

Just type “ng update” in your current project and enjoy its features.

Give Angular 13 a try with the power of IVY.

If you use an older version, it’s time to update from Angular 12 to Angular 13 to build great apps that support modern web standards.

Leave a Comment