Angular 13, the latest version of the TypeScript-based web framework was released. The release has brought several essential updates that can be useful for Angular development.
Contents
1. TypeScript 4.4 support
TypeScript 4.4 support is now available in Angular 13. 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.
The significant highlights of TypeScript 4.4 are:
- Improved detection of type guards.
- Default catch variables.
- Faster incremental builds.
- The control flow of conditions can be analyzed
- Symbol and template string pattern index signatures.
2. Version 7.4 of RxJS
The Angular 13 update adds RxJS, a reactive extension for JavaScript, and includes all versions of RxJS up to and including version 7.
For apps created with ng new, RxJS 7.4 has become the default.
Existing RxJS v6.x apps will need to be manually updated with the npm install [email protected] command. You can always rely on RxJS 7 for new project creation. As for migrations, existing projects should keep on RxJS 6.
3. 100% Ivy and No More Support for View Engine
The legacy View Engine is no longer supported. Now that there is no View engine-specific metadata or older output formats, it eliminates the codebase complicacy and maintenance costs. Ivy is now the only view engine supported by Angular. Ivy can now compile individual components independently of one another, which significantly improves performance and accelerates development times.
By removing the View Engine, Angular can reduce its reliance on ngcc too. 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. IE 11 Support Removed
This stands out to be one of the significant Angular 13 features. Angular 13 no longer supports IE11. CSS code paths, build passes, polyfills, special JS, and other parameters that were previously required for IE 11 have now been completely dropped off.
As a result, Angular has grown faster, and it is now easier for Angular to use new browser features like CSS variables and web animations using native web APIs.
During project migration, running the ng update will automatically remove these IE-specific polyfills and reduce the bundle size.
5. Angular CLI Improvements
The Angular CLI is one of the key components of the Angular Puzzle. Angular CLI helps standardize the process of handling the complexities of the modern web development ecosystem by minimizing these complexities on a large scale.
With the release of Angular 13, this framework now includes a persistent build cache as a default feature, which saves built-in results to disk. As a result, the development process will be accelerated. Furthermore, you have complete control over enabling or disabling this feature in current Angular apps.
6. Improvements to Angular testing
The Angular team has made some notable changes to TestBed, which now correctly tears down test environments and modules after each test.
As the DOM now experiences cleaning after tests, developers can anticipate more optimized, less interdependent, less memory-intensive, and quicker tests.
7. Changes to the Angular Package Format (APF)
The Angular Package Format (APF) defines the format and structure of Angular Framework packages and View Engine metadata. It’s an excellent strategy for packaging every third-party library in the web development environment.
Older output formats, including some View Engine-specific metadata, are removed with Angular 13. The updated version of APF will no longer necessitate the use of ngcc. As a result of these library changes, developers can expect faster execution.
8. TestBed updates
The latest Angular update improves the TestBed significantly, as the DOM is cleaned after every test. In addition to this, the TestBed tears down test modules and environments in a more effective manner.
Therefore, developers using Angular 13 will get faster, less interdependent, memory-intensive, and optimized tests.
9. Creating dynamic components
One Ivy-enabled API update in Angular 13 is a more streamlined method for dynamically constructing a component. ViewContainerRef.create component no longer requires an instantiated factory to construct a component (no longer need to use ComponentFactoryResolver).
Due to the improved ViewContainerRef.createComponent API, it is now possible to create dynamic components with less boilerplate code. Following is an example of creating dynamic components using previous versions of Angular.
@Directive({ … })
export class Test {
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 as follows.
@Directive({ … })
export class Test {
constructor(private viewContainerRef: ViewContainerRef) {}
createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}
10. NodeJS Support
Node versions older than v12.20.0 are no longer supported by the Angular framework. Web developers might face certain issues while installing different packages if working with older versions.
16.14.2 is the current stable version of NodeJS. For ensuring seamless deployment of your project, it is recommended to install the latest versions of NodeJS.
Conclusion
The Angular team tries to release a new version update every six months. Now that you know the significant updates and features of the all-new Angular 13. Apart from delivering on the Ivy everywhere promise made in Angular 12 and removing the View Engine altogether, Angular 13 has many impressive features and updates. The framework has become more efficient with inline support for fonts, simplified API, components, and CLI improvements.
The release of Angular 13 enhances the web development process so that the Angular developer can create awesome apps to meet modern web development standards. If you’re still using Angular 12, it’s time to upgrade your next project with new features.
At Andolasoft, we have expert Angular developers who can help you migrate your existing applications, and also create new web and mobile applications with the best quality. Feel free to book a free consultation with our experts.
