What’s New In Angular 11

Welcome.
Yes! Welcome to the great new updates for Angular 11. That’s news to make Angular developers happy everywhere. Updates have been done across the platform including the CLI and components, the framework. Let’s explore to find out how you can benefit from the developments.
The updates to the web framework developed by Google have been published recently as a production release. The stable release date of Angular 11 is November 11, 2020. Features include improvements of router performance, fonts with auto inlining, stricter types and a lot more.

1. Auto inlining of fonts
With Angular 11, in apps by default, automatic inlining of fonts will be activated. This will make the apps much faster because their first contentful paint will be speeded up. Angular CLI will get downloaded and inline fonts that are linked in the application and being used during compile time. However, your app needs to be updated if you want to take advantage of this optimization.

2. Improvement of logging and reporting
Changes have been made to the builder phase reporting which is more user-friendly and supportive for development. Logs and reports are now easier to read due to introduction of new CLI updates. This is highly advantageous and beneficial for developers since it will save a lot of time and increase efficiency.

3. Component test harnesses
Angular material components are tested with a legible and robust API surface provided by Component test harnesses. In version 11, all components now have harnesses. So testing becomes a lot easier for developers and stronger and more powerful test suites can be created by them. Besides this remarkable characteristic, performance improvements have also been added. The API itself has been improved significantly.

4. Updated language service preview.
The language service which has been updated gives a precise and heavy-duty experience to developers. It is very helpful because it equips a developer with tools to make development productive. The previous version had it based on the view engine but the new version delivers Ivy-based language service. This language service can behave in the same way as the TypeScript compiler notwithstanding the fact that it is still under process of some sort of development.

5. Updated hot module replacement support. (HMR)
The CLI has been updated in version 11 so that HMR gets activated by starting the application with ng serve. Developers who are working on the local server may derive a lot of benefits from this. For instance, let’s say a developer has filled in a large form with some data. Now, if changes are made in the code, they will be automatically updated and there will be no loss of data in the form. So a full page refresh is now redundant and developer productivity is enhanced.

6. Faster builds
When dependencies are installed in Angular 11, the ngcc update process is 2-4 times faster. The compilation is also much faster with TypeScript version 4.0.

7. Experimental webpack 5 support
Teams now can work with Webpack version 5. However, currently experiments can be done with module federation. This version will allow developers to make smaller bundles and faster builds with continuous disk catching, once things become stable. It is to be noted that support is only experimental and under developmental phase. So this is not recommended for production uses.

8. Linting
In Angular, Linting is actually running of a software which scrutinizes and probes the code for stylistic and programmatic errors. TSLint was once the most popular linting tools, but now the angular team is recommending a shift to ESLint. Eventually TSLint will be redundant and would not be used for linting purposes again. A third-party solution and migration path via typescript-eslint, angular-eslint, and tslint-to-eslint-config have been developed by folks from the open-source community.

9. Housekeeping
Support for IE9/IE10 and IE mobile is no more available in Angular 11. The sole version of IE still supported by Angular is IE11. The APIs have also been removed and a few added to the removed list. Make sure about using the latest APIs.

10. Roadmap
To notify and acquaint you with the latest priorities the Angular team has updated the Roadmap. Some declarations here are updates about in-progress projects from the roadmap. This reveals the team’s approach to unfurl larger efforts which enable the developers to give early feedback that can be integrated with the final deliverance.