Angular 13 has arrived in the market with some exciting features and updates. It focuses more on “Ivy” and they call it the “Ivy Everywhere” approach. Let’s dive into the tutorial and see what is new in Angular 13 and how it affects the performance.
Table of Contents
Angular 13 Features TL;DR
Angular v13 updates will not only speed up the website performance but also increase productivity. It will help Angular developers to do less coding to achieve the same result as previously. It has reduced production bundle build size. Here are Angular 13 features in brief.
- View Engine is removed
- Easily create components dynamically
- IE11 Support ended
- Persistent build cache is enabled by default
- ESBuild performance improvements
- RxJS 7.4 is used as the default
- TypeScript 4.4 supported
- Improvements to Angular Tests
- Improvements to Angular Material
- Adobe Fonts supported
- Dynamically enable/disable validators
- Restore history after canceled navigation
- Community PR contributions
- Docs updated
Upgrade existing application to Angular 13
Upgrade from v12 to v13 doesn’t require much effort. Running the update command will take care of all the things.
1 2 3 | ng update |
Follow the instructions here to upgrade from any previous version to the latest.
What’s new in Angular v13 release with examples
We have seen the new features and updates in v13 in short. Let’s implement it one by one and understand with examples.
State of View Engine
View Engine has been removed from Angular v13. It will use Ivy-based features that will enhance productivity. Removing View Engine means it reduces its dependency with ngcc
(Angular compatibility compiler). The compilation will be faster because metadata and summary files are no longer included.
Create Dynamic Components
Developers are easily able to create dynamic components by the changes it has made in Ivy. The new API removes the need for ComponentFactoryResolver
being injected into the constructor. Ivy creates the opportunity to instantiate the component with ViewContainerRef.createComponent
without creating an associated factory.
Here is how you can create a dynamic component with the new API:
1 2 3 4 5 6 7 8 9 | @Directive({ … }) export class MyDirective { constructor(private viewContainerRef: ViewContainerRef) {} createMyComponent() { this.viewContainerRef.createComponent(MyComponent); } } |
Ivy enables many of the API improvements like this.
End of IE11 support
The angular team removed the IE11 support from the feedback of community contributors. Removing the IE11 support removes IE-specific polyfills and code paths. It helps in faster application loading and an improved user experience.
It also removes the need for differential loading. Differential loading is a strategy that allows the web application to support multiple browsers. It bundles files based on the supported browsers. Basically, two types of browsers- modern and legacy. When users access the web application, they get the legacy or modern bundle automatically based on their browser.
ng update
will automatically drop these IE-specific polyfills and reduce bundle size during project migration.
Persistent build cache
Angular v13 has enabled the persistent build cache by default based on the community feedback. It is a feature that will help persist the build on disk. It reuses the persisted data in subsequent build pipelines via ng build
, ng serve
, and other ng
commands. The improvements in the build speed by this feature is up to 68%.
Developers can easily opt-in or opt-out for persistent build cache.
Enable the persistent build cache in the existing project by adding the configuration to angular.json
:
1 2 3 4 5 6 7 8 9 10 11 12 13 | { "$schema": "...", "cli": { "cache": { "enabled": true, "path": ".cache", "environment": "all" } } ... } |
ESBuild performance improvements
esbuild
along with terser
is used to optimize global scripts and global CSS. It improves the build speed and bundles the file faster than the previous versions.
ESBuild is a tool that makes the bundling of client-side scripts fast. It can link scripts and CSS dependencies as deployable assets for the web.
Terser is a JavaScript minifier module. It processes JavaScript files, compiled outputs from CoffeeScript, TypeScript, and Babel transpilers.
Minify your JavaScript code before using it in Production.
RxJS 7.4 in Angular 13
Angular 13 uses RxJS 7.4 by default for apps created with ng new
. Existing apps using RxJS v6.x will have to manually update using the npm install rxjs@7.4
command. Follow the instructions to migrate from version 6 to 7.
TypeScript 4.4 Support
Angular v13 will support TypeScript 4.4. It was released in August 2021.
Improvements to Angular tests
Angular 13 has made some important improvements to TestBed
that now does a better job of tearing down test modules and environments after each test.
Here is how to configure for the entire test:
1 2 3 4 5 6 7 8 9 10 11 12 | beforeEach(() => { TestBed.resetTestEnvironment(); TestBed.initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: true } } ); }); |
Configure it for each module:
1 2 3 4 5 6 7 8 9 10 | beforeEach(() => { TestBed.resetTestEnvironment(); ... TestBed.configureTestingModule({ declarations: [TestComp], teardown: { destroyAfterEach: true } }); }); |
It clears the DOM after every test and developers can expect faster, less memory-intensive, less interdependent, and more optimized tests.
Improvements to Angular Material
Angular v13 improves accessibility (a11y) in areas such as contrast, touch, targets, and more.
Adobe Fonts
Angular v13 extends support for Adobe Fonts that will improve app performance by speeding up the First Contentful Paint (FCP). Get the change by running ng update
command.
Dynamically enable/disable validators
Built-in validators can be enabled/disabled by setting the value to null
. It will be helpful in building dynamic forms.
Restore history after canceled navigation
canceledNavigationResolution
flag can be set to computed
that will restore the computed value of the browser history.
1 2 3 4 5 6 | RouterModule.forRoot( routes, { canceledNavigationResolution: 'computed' }, ); |
Community PR contributions
There are many community contributions done for Angular v13. This article covers many of them but still, there are many features left.
Docs updated
Last but not the least, Angular v13 has updated its docs. It will have all the instructions on the latest version.
Conclusions
Angular v13 has a lot of exciting features and updates that will not only improve the website speed but also help developers to easily build scalable applications. It is a well-growing JavaScript framework that focuses on building large scalable and lightweight applications.
This article covers most of the top features provided by Angular 13. Upgrade your older version to the latest now and enjoy all the exciting features of it.
Also Read: