Angular 11 New Features


With the new version of Angular 11, they are releasing many new features and a few old issue fixes. Exiting fixes are router, forms, and the localization string use outside the templates. This issue is fixed and available in Angular 11.

  • How to update to Angular version 11

  • Automatic Inlining of Fonts

  • Component Test Harnesses

  • Improved Reporting and Logging

  • Updated Language Service Preview

  • Updated Hot Module Replacement (HMR) Support

  • Faster Builds

  • Experimental webpack 5 Support

  • Linting

  • Housekeeping

  • Roadmap

How to update to Angular version 11

If we need to update Angular 10 or the old version needs to be updated to the latest version, Angular 11, please execute the below line in the command section:

ng update @angular/cli @angular/core Automatic Inlining of Fonts One of the new features introduces automatic font inlining in Angular 11, which means during compile time Angular CLI will download and inline fonts that are being used and linked in the application.

The inlining font is the default behavior in apps built with angular 11, so if you want to take and benefit from this advantage we need to do update our angular application to the angular 11 version. Component Test Harnesses

In Angular 9 there was this component test harness that provided a readable and robust API based for testing Angular material components with the supported API at test. With this new version 11, we now have harnesses for all components, so even more test suites can now be built by developers. Improved Reporting and Logging The next one Angular 11 has a lot of improvements in the new CLI output to make logs and reports easier to read. You can see the logs and generated files. Please refer to the below images.

Updated Language Service Preview

Angular 11 makes development with Angular more productive. The Angular team has introduced the Angular Language Service, which provides helpful tools. The previous Angular 10 versions of the language service are based on View Engine. From now on, we have a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers in the Angular 11 version. For example, now the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does. Updated Hot Module Replacement (HMR) Support

In version 11 they’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To run the following command:

 ng serve --hmr

This will very helpful for developers working on the local server. For example, the developer has a large form and they filled it with some data. When they make a change in the code, what they have changed will be updated without any loss of the data in the form. Faster Builds