Angular is a web framework developed by Google and Angular 13 is one of the most organized pre-planned upgrades for typescript-style web framework Angular. According to the techies, Angular 13 claims to be 100% Ivy. The latest version comes with error message improvements, better integration, deployment providers, pure annotations and so on. If you’re not aware of new features of Angular 13, then this blog is for you. So let’s find out what’s new in Angular 13.
Also know the angular best practices at- Top 10 Angular Best Practices To Follow
New Features And Improvements In Angular 13-
1. 100% Ivy-
The creators of Angular development services wanted to enable quality improvements in dynamic components. Considering this, API has been simplified. New API removes ComponentFactoryResolver with ViewContainerRef.createComponent without creating associated factory. Let’s have a look at how the components were created with previous version of Angular.
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef,
private componentFactoryResolver:
ComponentFactoryResolver) {}
createMyComponent() {
const componentFactory = this.componentFactoryResolver.
resolveComponentFactory(MyComponent);
this.viewContainerRef.createComponent(componentFactory);
}
}Here’s how new API code can become.
@Directive({ … })
export class MyDirective {
constructor(private viewContainerRef: ViewContainerRef) {}
createMyComponent() {
this.viewContainerRef.createComponent(MyComponent);
}
}2. Improvements To The Angular CLI-
Angular now supports the use of persistent build cache by default for new v13 projects. The valuable feedback from [RFC] Persistent build cache by default led to the tooling update which results in nearly 68% improvement in build speed and more ergonomic options. In order for existing projects that have been upgrading to v13 to enable this features, programmers can add this configuration to angular.json:
{
"$schema": "...",
"cli": {
"cache": {
"enabled": true,
"path": ".cache",
"environment": "all"
}
}
...
}ESBuild also sees some performance improvements in this Angular 13 release. We introduced esbuild, that now works with terser so as to optimize global scripts. Also, esbuild supports CSS sourcemaps and can optimize global CSS, also optimizing all style sheets.
3. Changes To The Angular Package Format (APF)-
Angular Package Format (APF) has been streamlined and modernized to serve better. To streamline the APF in v13, older output formats were removed including View Engine specific metadata. So as to modernize it, it is standardized on more modern JS formats like ES2020. Libraries that were built with the latest version of APF will no longer need the use of ngcc. As a result of these changes, library programmers can expect lean package output and faster execution. Updated APF support Node package exports. This helps developers form inadvertently depending on internal APIs that may change.
4. Improvements To Angular Tests-
Here are some improvements to TestBed that does better job of tearing test modules and environments after every test. Now the DOM is cleaned after each test and programmers can expect faster, less memory-intensive, less interdependent and more optimized tests. Let’s have a look at how it can be configured for complete test suite through the TestBed.initTestEnvironment method:
beforeEach(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
{
teardown: { destroyAfterEach: true }
}
);
});Or it can be configured per module by updating the TestBed.configureTestingModule method:
beforeEach(() => {
TestBed.resetTestEnvironment();
...
TestBed.configureTestingModule({
declarations: [TestComp],
teardown: { destroyAfterEach: true }
});
});This provides flexibility to apply these changes where they make the most sense for every project and its tests.
5. No Support For IE11-
This Angular 13 version won’t support internet explorer. If you’re planning to hire an Angular programmer, they don’t expect anything to create from IE11.
6. RxJS 7.4-
Angular v13 includes RXJS to all the versions upto version 7. New apps created with the CLI will default to RxJS 7.4. If you’re using RxJS 6 in existing app, you need to manually run the command npm install rxjs@7.4 for the latest update.
7. A New Form-
Angular 13 brings a new type called “FormControlStatus”. It is a combination of all strings of statuses for form controls. Also they’ve narrowed the “AbstractControl.status” from “string” to “FormControlStatus” and “StatusChanges” from “Observable<any>” to “Observable<FormControlStatus>”.
8. Pure Annotations-
Angular 13 has pure annotations included in static property initializers for the core. The class properties that come with initializers causing code execution may have some side effects while evaluating the module. Only way to allow classes with these static property types is to optimize it or remove it if they remain unused. Programmers can annotate initializer expressions for the static properties as pure.
9. Service Worker-
Angular 13 clears cache of service worker in the safety worker so as to ensure that it doesn’t provide broken or stale contents against requests made in the future.
10. Package Format-
Angular 13 brought Angular Package Format 13 that will remove code particular to View Engine from packages.
