Run ng(next generation) update in your project to get Angular v13 right now. We also offer an updated guide that can be used by teams to learn how to update their projects.
Our objective with each new version is to find meaningful ways to improve Angular. We've accomplished this in this version by expanding Ivy-based features and optimizations, collaborating with our fantastic Angular community, and continuing to deliver a smooth, stable update experience for your teams and projects.
Let's start with a look at how we're using Ivy to push Angular ahead.
Taking Angular Rendering to the Next Level
We talked about "Ivy Everywhere" in the v12 released in May 2021, and we said that there would be some significant modifications to Angular to enable this project. We've been working hard on this, and we're excited to see some significant changes in v13, as Ivy continues to open doors for optimizations and enhancements.
State of view engine
As of Angular v13, the View Engine is no longer available. This is fantastic news since it means Angular can continue to develop Ivy-based features to help you get the most out of the platform. Because the View Engine is no longer required, Angular may minimize its reliance on the ngcc (Angular compatibility compiler) in the future, and teams can expect faster compilation because metadata and summary files are no longer required.
The Angular Package Format has been updated (APF)
To better assist developers, the Angular Package Format (APF) has been streamlined and improved. We've eliminated older output formats, including View Engine-specific metadata, from the APF in v13 to make it more streamlined.
We've standardized on more current JS standards like ES2020 to modernize it. The use of ngcc is no longer required in libraries built using the current version of the APF. Library developers might expect leaner package production and faster execution as a result of these changes.
The APF has also been upgraded to handle Node Package Exports. This will prevent developers from depending on internal APIs that may change in the future.
Updates of API Components
Ivy also improves the developer experience by allowing them to dynamically generate components. The API has been made more user-friendly. Dynamically building components required a lot of boilerplate code before the modifications in Angular v13.
The new API eliminates the requirement to introduce a Component Factory Resolver into the constructor. Ivy allows you to construct a component with ViewContainerRef.create a component without having to create an associated factory.
Here's an example of how to create components in prior Angular versions:
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver:
ComponentFactoryResolver) {}
createMyComponent() {
const componentFactory = this.componentFactoryResolver.
resolveComponentFactory(MyComponent);
this.viewContainerRef.createComponent(componentFactory);
}
}
This code may now be transformed using the new API:
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef) {}
createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}
We have plenty of other API upgrades in the works, all of which will be enabled by Ivy.
End of IE11 support
Support for Internet Explorer 11 is coming to an end.
With the elimination of IE11 support in Angular v13, we listened to your concerns and worked to prepare the way forward.
By removing support for Internet Explorer 11, Angular can now use native web APIs to make use of modern browser features like CSS variables and web animations. Furthermore, because we can remove IE-specific polyfills and code paths, programs will be smaller and load faster. Differential loading is also no longer required. Improved APIs and build infrastructure will benefit developers, while faster loading and a better user experience will benefit app users.
During project migration, running ng update will automatically remove these IE-specific polyfills and minimize bundle size.
Developers that need to support Internet Explorer 11 users for current applications can utilize Angular v12, which will be supported until November 2022.
The Angular CLI has been improved.
Then there's the new Angular tooling. For new v13 projects, Angular now supports the use of a permanent build-cache default. This tooling change was prompted by the default permanent build-cache, which results in a 68 percent increase in build speed and additional ergonomic options. To activate these functionalities in existing projects that have been upgraded to v13, developers can add the following configuration to angular.json:
{
"$schema": "...",
"cli": {
"cache": {
"enabled": true,
"path": ".cache",
"environment": "all"
}
}
...
}
This release also includes some performance enhancements for ESBuild! To optimize global scripts, we implemented ESbuild, which now works with terser. ESbuild also supports CSS source maps and can optimize global CSS in addition to all style sheets.
Updates to the Framework and Dependencies
Developers can now use the ng new command in Angular 13 to build new projects using the upgraded RxJS7.4. The npm install rxjs@7.4 command can be used to manually update existing RxJS V6.x projects. It comes with TypeScript 4.4.2 support, and all previous versions are no longer supported. Node versions prior to v12.20.20 are also no longer supported.
Debugging and testing times have improved.
For Angular applications and libraries, TestBed is the primary unit testing API.
The latest version of TestBed has been published with an updated test API in order to reduce test time. The framework can now automatically set up and tear down the test environment, as well as learn the DOM after each test run. This results in tests that are faster, less memory-intensive, and better isolated.
The TestBed.initTestEnvironment method can be used to configure it for the full test suite:
beforeEach(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true }
}
);
});
Alternatively, by changing the TestBed.configureTestingModule function, it can be customized per module:
beforeEach(() => {
TestBed.resetTestEnvironment();
...
TestBed.configureTestingModule({
declarations: [TestComp],
teardown: { destroyAfterEach: true }
});
});
This gives the option to make adjustments where they make the most sense for your project and testing.
It's all about the components
Everything we build inside and outside of the Angular community must start with accessibility (a11y). We take this responsibility seriously, and our efforts have led to significant enhancements and improvements to Angular Material components.
All MDC-based components have been tested to ensure that they fulfill high a11y standards in areas like contrast, touch targets, and ARIA.
Take a look at the adjustments we've made to the touch target sizes for components like the checkbox and radio button to get a better feel of how these changes affect components.
Other Modifications
TypeScript version 4.4 is now supported by the framework core.
RxJs (Reactive Extensions for JavaScript), version 7 of the reactive programming library, is now supported.
Inlining fonts increase web performance by speeding up the First Contentful Paint (FCP). As a result, the team has included support for inlining Adobe Fonts in Angular 11, just as they did for inlining Google Fonts.
Built-in validators like min, max, and minLength can be dynamically disabled or enabled.
In ng package, we can specify custom conditions.
The platform browser's error messages have improved, such as the one regarding "a missing animation trigger."
In the security worker, clear the service worker cache. This ensures that future requests will not be provided with broken or expired material.
The localization API has been improved.
Conclusion
The Angular framework's new update arrived with several new capabilities. If your requirements do not require Internet Explorer 11, you can update to Angular 13 more quickly by using the ng update command in your project.
Angular 13 has created the groundwork for Angular's rapid expansion in the near future, with additional improvements on the way, particularly with Angular 15, which will be released in November. As a result, now is the moment to migrate to Angular as a business.
