What Is New in Angular 11.0
| Category | Key Updates |
|---|---|
| New Features | Automatic font inlining, Component Test Harnesses, Updated Hot Module Replacement (HMR) support |
| Improvements | Faster builds, stricter types, updated language service, smoother router transitions |
| Breaking Changes | TypeScript 4.0 support, TSLib update, IE9/IE10 removal, NgCC refactoring |
| Deprecations | IE 9-10 support, TypeScript 3.9 |
How does Angular 11 improve the build process?
Angular 11 speeds up development and production builds significantly. The CLI now automatically inlines fonts that are used and linked in the application, which is a small but impactful change for performance.
In practice, this means your app loads critical resources faster without extra configuration. The team also refactored the Angular Compatibility Compiler (NgCC) for faster processing, which is a big win for larger projects using legacy libraries.
What testing enhancements were introduced?
Component Test Harnesses graduated from experimental to a stable feature. They provide a robust way to test components by interacting with them through a supported API rather than relying on implementation details like CSS selectors.
This matters because it makes your component tests much more resilient to DOM structure or CSS class changes. You can write tests that simulate real user interactions, which leads to higher quality and more maintainable test suites.
What are the key language and type updates?
Angular 11 now requires TypeScript 4.0, which brings its own set of powerful features and improvements. The framework itself also ships with stricter types, particularly for the AsyncPipe, which now returns null instead of undefined for easier type checking.
The language service got smarter too, offering better completion and error detection. This directly improves the developer experience in your IDE, catching issues earlier and providing more accurate IntelliSense.
How is Hot Module Replacement (HMR) supported now?
While HMR was possible before, Angular 11 provides a more streamlined and official configuration path. You can now enable it during development with a simple schematic.
This is a game-changer for developer productivity. Making a change to a component and seeing it update instantly without a full page refresh and losing the current application state makes the feedback loop incredibly fast.
What breaking changes should developers watch for?
The support for Internet Explorer 9 and 10 has been removed, aligning with Microsoft's own end-of-life for those browsers. Projects still needing IE support must target IE 11.
TypeScript 3.9 is no longer supported, so you must upgrade to TypeScript 4.0. The router also changed how it resolves empty paths, which might affect some edge-case routing configurations in existing apps.
FAQ
Does the automatic font inlining work with all webfonts?
It inlines fonts that are linked via the CSS @font-face rule and are used within the application. Google Fonts and other popular CDN-hosted fonts are the primary targets for this optimization.
I use Jest for testing. Do Component Test Harnesses work with it?
Yes, Component Test Harnesses are test-runner agnostic. They are built on top of the standard Angular testing utilities and will work with both Karma and Jest environments.
The change from
undefined to null for the initial value was made to improve interoperability with strict template type checking. null is generally easier to work with in Angular's template type system.
Is updating to TypeScript 4.0 mandatory?
Yes, Angular 11.0.0 has a peer dependency on TypeScript >=4.0. You cannot use an older version of TypeScript with this release of the framework.
What's the easiest way to enable HMR?
Run ng serve --hmr. For a persistent setup, you can add "hmr": true to the serve options in your angular.json configuration file.