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.
Angular13 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.
Angular13 has come up with a new APF's version, and some of the significant changes in it are:
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:
Previous Version
@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:
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
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.