What’s new in Angular v13!

The wait is over and Angular version 13 has been released. this release is mostly around the expansion of Ivy-based features and optimizations.

Get Angular v13 by running

ng update
Visit https://update.angular.io/ for more and detailed info

Changes or Enhancements added in Angular v13

1. View Engine is no longer available in Angular as of v13
   Now Angular can reduce its reliance on Angular compatibility compiler(ngcc). It will result in faster compilation because metadata and summary files are no longer included.

2. Improved Angular Package Format (APF)
Angular team has removed older output formats, including View Engine-specific metadata. Libraries built with the latest version of the APF will no longer require the use of ngcc. It will result in smaller package output and faster execution.

3. Easy to create dynamically components
In Angular v13 need for ComponentFactoryResolver has been removed.
Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent. It will simplify boilerplate code.

Ex…

Before V13
@Directive({ … })
export class DirectiveName {  
 
 constructor(private viewContainerRef: ViewContainerRef,                private componentFactoryResolver:                         ComponentFactoryResolver) {}   
 createYourComponent() {      
  const componentFactory = this.componentFactoryResolver.                             resolveComponentFactory(ComponentName);            this.viewContainerRef.createComponent(componentFactory); 
   }
}
With V13(componentFactoryResolver dependency has been removed)
@Directive({ … })
export class DirectiveName {    
constructor(private viewContainerRef: ViewContainerRef) {}    
createYourComponent() {        this.viewContainerRef.createComponent(ComponentName); 
   }
}

4. End of IE11 support
IE11 support has been removed to get modern browser features such as CSS variables and web animations via native web APIs. It also removes the need for differential loading.

5. Faster builds(Disk Cache)
Persistent build-cache has been enabled by default. it will result in up to 68% improvement in build speed.

6. Angular v13 supports RxJS 7.4 by default.

7. Angular v13 supports TypeScript 4.4.

8. Improved Testing
TestBed now does a better job of tearing down test modules and environments after each test. The DOM is now cleaned after every test. It will result in more optimized and faster tests.

9. Improved Forms
A new union Type(FormControlStatus) has been added for AbstractControl. Reason is AbstractControl.status being typed as a string and the AbstractControl.statusChanges being an Observable<any>.

10. NodeJS versions older than v12.20.0 are no longer supported

11. Disable navigation

Setting the routerLink directive value to null or undefined will now completely disable navigation.
Previously, null and undefined inputs for routerLink were equivalent to empty string and there was no way to disable the navigation of the link.

12. Improved URL serializer
The router now supports question marks in query param values.
Previously, the default URL serializer dropped everything after and included a question mark in query parameters.

Before V13
/path?q=hello?&other=123, 
it will parsed to just {q: 'hello'}

With V13
/path?q=hello?&other=123 
it will parsed to {v: 'hello?', other: '123'}

13. With v13, The router no longer replaces the browser URL, when new navigation cancels ongoing navigation. The replacement of the browser URL often caused URL flicker. For hybrid applications, if required, dev have to do it manually by location.replaceState to add navigationId to the Router state

Happy Learning…👏👏👏