What’s New in Angular 11?

Let’s take a closer look at the latest Angular 11 updates and what makes it so fast, how you lint, log and inline fonts, and a few other things too.

Angular, Google’s JavaScript (TypeScript) framework for building web applications mobile or desktop, has over 68,000 stars on GitHub. Maintained by the Angular Team at Google and a host of community members and organizations, Angular Version 11 was released on the 11th day of the 11th month of 2020. How cool is that?

This is a wholesome update because it touches the framework itself, the CLI and even the components. In this post we will look into the new and shiny features that shipped with this new version.

Faster Builds

The first thing Angular has been consistently doing with new versions is the commitment to optimizing for speed. In this new version, Angular gets even faster than you know, from the dev to even the build cycle. This was possible through a few changes and updates on things like compilation, which now uses TypeScript 4.0 and faster processes like the ngcc update, now up to four times faster.

Angular ESLint Updates

So before this new version, Angular always implemented linting with TSLint by default, but TSLint is now deprecated by the creators, who recommend migrating to ES Lint completely.

With a lot of Angular community members’ help together with James Henry, a third-party migration path was built with typescript-eslint, angular-eslint and tslint-to-eslint-config, and this has been tested to ensure a smooth transition for Angular devs. So, moving forward, the use of TSLint and even Codelyzer have been deprecated, meaning the default Angular implementation for linting will no longer be available but you can incorporate angular-eslint in a project and migrate from TSLint. You can read more about it here.

Internet Explorer Updates

This new version is also removing all support for old versions of Internet Explorer versions 9 and 10 and even the mobile version. The only IE version now still being supported is 11, and deprecated APIs were also removed too.

Webpack 5 Support

This new version ships with an opt-in experimental webpack support. That means that you can opt in to use version 5 of webpack in your project going forward. Angular plans to lead this path and allow for faster builds with really persistent caching of the disk and even smaller bundle sizes with the cjs tree-shaking. Do remember that this is still experimental, so do not use it in production yet. You can take it for a spin by enabling it inside your new project by adding this line below to your package.json file:

"resolutions": {
     "webpack": "5.4.0"
}

You have to use yarn though, as npm does not work yet.

Improved Logging and Reporting

This new version of Angular also ships with new changes in the way reporting is done on the builder phase during development. New changes have now been made on the CLI to make logs and even reports generally easy to read.

Updated Language Service Preview

The language service Angular used before now to provide tools that help make building with Angular fun was based on the view engine. Now that Ivy is mainstream, the team wants you to see a preview of how things will work with a better engine and renderer. This gives you the best Angular experience hands down and it will be able to infer generic types inside your templates just as a TypeScript compiler will do. Look at the image below for a good instance of inferring the iterable type of string.

This is however still in development and you should stay tuned to when it will be released in the first 11.x release announcement soon.

Updated Hot Module Replacement (HMR) Support

Angular has had the support for hot module replacement for a bit now; however, using it had requirements that would involve config changes that made it not really great to include in new Angular projects. So the CLI had to be updated this new version to enable HMR from the jump as you run ng serve like this:

ng serve --hmr

After your app runs, you will see the confirmation message saying that HMR is active. You should also remember it is only available for the development server. So as you build you will begin to see the latest changes to your components, templates and even your styles instantaneously update as you run the app without an actual page refresh at all. This is good—it reaches things like data users type inside input boxes in forms. You can learn more about it all here.

Automatic Font Inlining

More optimization updates, now the very first contentful paint of your app is set up with automatic inlining. This means that as you run ng serve, Angular will now download and inline fonts that are used or linked in your project so that everything loads up even faster. This update comes right out of the box with Angular 11, so update your version.

Component Test Harnesses

With Angular 9 there was this component test harness that provided a readable and robust API base 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.

This comes with a lot of updates, performance improvements and even new APIs. Now the parallel function makes dealing with async actions inside tests easier because you can run multiple async interactions with your components in parallel. A function like the manual change detection will now give you access to even better control of detection by just disabling auto change detections inside your unit tests. You can check out the docs here to learn more about Angular material test harnesses.

Updating to Version 11

Inside your CLI, you can update a project with the command below:

ng update @angular/cli @angular/core

For more update scenarios, visit update.angular.io to find detailed information and guidance on updating. It is safer to update to version 11 from version 10.

Conclusion

This has been a quick overview of all the new and shiny changes that shipped with the long-awaited version 11 of Angular. The auto font inlining was my favorite new feature. What is yours?