Angular is Google’s JavaScript framework for building web application, mobile or desktop apps. Google has released a new version of Angular which is Angular 11 and it has brought a lot of good features and also several improvements, aiming to simplify the development process. A new version focuses on improving the developer experience by addressing the bug issue raised by the community. If you are wondering what’s new in Angular 11, then let’s have a look at new features of Android 11.

What’s New In Angular 11?

1. Automatic Inlining Of Fonts-
It is one of the new features in Angular version 11. Angular CLI will now automatically download and inline the fonts that are linked in with the application. This feature will be enabled by default and is very helpful for commercial apps or websites as they benefit the most from having better web vitals. Google Fonts and Icon will be converted to inline in index.html with the flag mentioned below in angular.json under build option. These features are enabled by default for production configuration. You can take advantage of this optimization by ensuring that the internet connection is available during the build if build is running on CI. You have to update your application to enable this by default in apps built with version 11.

"configurations": {
"optimization": {
"fonts": false
}
}
OR
"configurations": {
"optimization": {
"fonts": {
"inline": false
}
}
}

2. Component Test Harnesses-
This was introduced in Angular version 9. It gives a robust and legible API surface that assists with testing the Angular Material components. This provides a way for interaction of developers with Angular Material components by using supported API while testing. This is one of the Angular 11 advantages where the developers can more use robust test suites by providing harnessing to all components. Parallel function in Angular 11 works with asynchronous actions in tests by allowing developers to function various asynchronous interactions with components in parallel. Using manual change detection function, developers can disable automatic change detection in unit tests and access the finger-grained control of change detection.

3. Angular ESLint Updates-
Prior to this version, Angular implemented linting with TSLint by default, but TSLint is deprecated by creators, who recommend migrating to ES Lint completely. With the help of angular community, a third party migration path was built with typescript-eslint, angular-eslint and tslint-to-eslint-config and these has been tested to ensure a smooth transition for Angular devs. The use of TSLint and Codelyzer have been deprecated means the default implementation for linting will no longer be available but you can incorporate angular-eslint in a project and migrate from TSLint.

4. Webpack 5 Support-
This new version of Angular came with an opt-in experimental webpack support. It means that, one can use version 5 of webpack in a project. Angular plans to lead this way and allow for faster builds with really persistent caching of disk and even small bundle sizes with the cjs tree-shaking. Keep in mind that it is in an experimental status, so don’t use it in a production yet. One can take it for a spin by enabling it inside your new project by adding the below line to package.json file:

"resolutions": {
"webpack": "5.4.0"
}
You have to use yarn though, as npm does not work yet.

Know more at- [https://solaceinfotech.com/blog/whats-new-in-angular-11/]