Top New Features and Updates of Angular 13
Categories: Angular
The all-new Angular 13 launched on November 3, 2021. Considering all the previous releases, we can say it is one of the most streamlined and previously planned upgrades for a broadly accepted TypeScript-based web framework.
Top Features and Changes Released in Angular 13
There is a lot to know about the latest version of Angular. So, let’s take a closer look at Angular 13 with all its newly added features and core updates.
1. Support for TypeScript 4.4
Angular v13 now support TypeScript 4.4. It means now we can use many fantastic language features. Moreover, they stopped supporting TypeScript 4.2 and 4.3 also. One breaking change in TypeScript 4.4 that is advantageous for Angular apps is that it no longer implements setters and getters to get a similar type.
2. Enhancements to Angular Tests
The Angular team has made some noteworthy changes to TestBed that currently functions properly to tear down test environments and modules after every test. As the DOM now experiences cleaning after tests, developers can anticipate more optimized, less interdependent, less memory-intensive, and quicker tests.
3. No More Support for View Engine
Angular 13 does not support the View Engine. The all-new version is now 100% Ivy. Now that there is no View Engine-specific metadata or older output formats, it eliminates the codebase complicacy and maintenance costs in Angular 13.
The framework has converted all internal tools to Ivy in advance so that this change can function seamlessly. Ivy assembles every component individually, which accelerates development times.
There is no more requirement of using ngcc (Angular compatibility compiler) for the libraries created using the latest APF version. The development team can expect quicker compilation as there is no more requirement for metadata and summary files.
4. Ergonomic APIs
Angular v13 has reduced the load time using ergonomic code-splitting APIs and granular code disruption at a component level. The new release of ESBuild has also brought an enhancement of performance.
ESBuild is a highly rapid JavaScript bundler. Now, it works with terser to optimize worldwide scripts. It supports CSS source maps that allow optimized global CSS also. Moreover, this JS bundler supports other framework languages like Vue, Svelte, and Elm.
5. Angular CLI Enhancements
The Angular CLI is one of the fundamental pieces of the Angular Puzzle. Few developers can handle the complicacy of the modern web development ecosystem in the world, and the Angular CLI safeguards them from most of it.
With the launch of Angular v13, this framework now supports persistent build cache by default. It’s a feature that caches build results on disk. It causes up to 68% enhancement in development speed. You can enable or disable this feature in current Angular apps.
6. Changes to the Angular Package Format(APF)
The Angular Package Format (APF) specifies the format and structure of the Angular Framework packages. It’s a great approach to packaging every third-party library in the web development ecosystem.
Angular 13 brings a new version of the APF, and we find some significant changes in it:
It creates Ivy partial compilation output.
There is no more production of UMD bundles.
It produces ES2020 output.
It utilizes the package exports with the sub-path pattern feature from Node.js to display several available outputs at every entry point.
7. Changes in Framework and Dependency Updates
Angular 13 also boasts some crucial changes and updates. Now, RxJS v7.4 is the default for applications built with ng new. Current applications utilizing RxJS v6.x will need to update manually using the npm install rxjs@7.4 command.
8. Component API Updates
Now, you can build dynamic components using less boilerplate code due to the improved ViewContainerRef.createComponent API. If you use Angular 13, you don’t have to use ComponentFactoryResolver.
Here’s an example of creating dynamic components using 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);
}
}
In Angular 13, this code can become using new API:
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef) {}
createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}
9. No Longer Support for Internet Explorer 11
For enjoying the benefits of native web APIs and features of modern browsers like CSS variables and web animations, the Angular framework has cut off the support for IE11. It provides a quicker load and smaller bundle size for applications and an enhanced user experience as there are no IE-specific polyfills and no requirement for distinctive loading.
It’s a notable change for some institutions or authorities that still run Internet Explorer 11 and haven’t yet moved to Microsoft Edge or other modern browsers.
10. Accessibility Update in Angular Material
The new version of Angular has brought an Accessibility (A11y) enhancement in Angular Material. The team has assessed and checked all MDCs (Material Design Components) for improved accessibility. For instance, radio buttons and checkboxes now have larger touch sizes, and other elements feature higher contrast modes.