# 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](https://v12.angular.io/guide/ivy)\-based features and optimizations.

Get Angular v13 by running

**ng update**

Visit [https://update.angular.io/](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…👏👏👏