Angular 11 What To Expect: Complete Guide to New Features

What's New in Angular 11

Angular 11 arrived as a production release on November 14, 2020, bringing a focused set of improvements centered on developer productivity and application performance. Following the substantial changes introduced in Angular 9 with the Ivy compiler, version 11 represents the Angular team's dedication to refining the framework based on community feedback and real-world usage patterns.

The release addresses long-standing issues identified through Operation Byelog, an initiative where the Angular team committed to triaging all outstanding issues within two weeks of reporting. This systematic approach to issue resolution resulted in a cleaner backlog and faster turnaround times for bug fixes. For development teams, this translates to more stable releases with fewer unexpected behaviors.

Automatic Font Inlining

One of the most impactful features in Angular 11 is automatic font inlining, a build-time optimization that downloads and embeds Google Fonts and icon fonts directly into the index.html file. This eliminates the need for additional network requests to external font servers, reducing page load times and improving Core Web Vitals scores.

The feature works by analyzing your application's HTML during the build process, identifying any externally linked fonts, downloading them, and inlining them as data URIs. For production builds, this optimization is enabled by default, requiring no additional configuration to benefit from improved font loading performance.

Developers who need to disable this optimization can do so by setting the fonts.inline option to false in their angular.json configuration file. This might be necessary in environments where build times are critical and font files are particularly large.

Enhanced Hot Module Replacement

Hot Module Replacement receives significant improvements in Angular 11, enabling developers to see changes to components, styles, and templates instantly reflected in the running application without requiring a full page refresh. This capability dramatically accelerates the development feedback loop, particularly valuable when working on complex user interfaces where preserving application state during development is crucial.

When HMR is active, the console displays a confirmation message after the local server starts, indicating that the hot replacement mechanism is functioning. Importantly, form input values and other application state are preserved across updates, so developers don't need to re-enter test data after making code changes.

The HMR implementation in Angular 11 builds upon webpack's HMR capabilities, providing a seamless integration that handles Angular-specific scenarios like template updates and style changes. This represents a substantial improvement over previous development workflows where even minor changes required full application reloads.

Build Performance Improvements

Angular 11 introduces significant build performance enhancements that directly impact developer productivity and CI/CD pipeline efficiency. The Angular Compatibility Compiler (Ngcc) sees dramatic performance improvements, with processing times up to four times faster than previous versions. This optimization becomes particularly noticeable in larger applications with numerous dependencies using the older View Engine format.

The TypeScript 4.0 upgrade brings compiler performance improvements that benefit both development builds and production compilation. While the full benefits of these compiler enhancements require TypeScript 4.1 support in future Angular releases, the foundation laid in Angular 11 positions projects to take advantage of subsequent improvements. Our TypeScript development services help teams leverage these improvements effectively. For teams comparing TypeScript with JavaScript, our guide on TypeScript vs JavaScript provides detailed insights into when each language is the right choice.

For development teams, these improvements translate to faster incremental builds during active development and reduced build times in CI/CD pipelines. The cumulative effect of these optimizations becomes substantial over the course of a project, reducing the time developers spend waiting for build processes to complete.

Experimental Webpack 5 Support

Angular 11 introduces experimental support for webpack 5, enabling developers to take advantage of the latest webpack features while maintaining compatibility with their existing Angular applications. Webpack 5 brings improvements including persistent disk caching for faster rebuilds, improved tree shaking for smaller bundle sizes, and module federation for dynamic code splitting across application boundaries.

Testing and Developer Experience Improvements

Component Test Harnesses

Angular 11 expands upon the component test harness functionality introduced in Angular 9, providing more robust APIs for testing Angular Material components and custom components. The new release introduces parallel testing capabilities that allow asynchronous interactions with components to run concurrently, reducing overall test execution time.

The manualChangeDetection function represents a particularly powerful addition, enabling developers to disable automatic change detection in unit tests and exercise fine-grained control over when change detection occurs. This capability proves invaluable when testing components with complex change detection strategies or when debugging change detection-related issues. Implementing comprehensive testing services ensures your Angular applications maintain high code quality standards.

Updated Language Service

The Angular Language Service receives substantial improvements in Angular 11, transitioning toward an Ivy-based implementation that provides more accurate type inference in templates. The new language service can now infer generic types in templates with the same accuracy as the TypeScript compiler, enabling better autocomplete suggestions and type checking during development.

Router and Forms Improvements

Angular 11 addresses several long-standing issues in the router module, particularly around the RouteReuseStrategy implementation. Previous versions had an issue where future and next routes were incorrectly evaluated for child routes, which is now fixed in Angular 11. Developers who were working around this behavior may need to adjust their code.

The router also deprecates the preserveQueryParams option in favor of the more explicit queryParamsHandling="preserve" approach. This change provides clearer semantics and aligns with Angular's broader TypeScript-first approach to API design.

Forms receive similar attention in Angular 11, with improved type safety for validators and asyncValidators. The async pipe no longer returns null for undefined inputs, which can reveal previously hidden type errors in applications but may require code adjustments where invalid input handling was not properly implemented.

// Angular 11 forms improvements - improved type safety
import { FormControl, Validators } from '@angular/forms';

// Validators are now properly typed
const emailControl = new FormControl('', {
 validators: Validators.required,
 asyncValidators: myAsyncValidator
});

// AbstractFormControl.parent now explicitly includes null in its type
// This requires explicit null checking where appropriate

Breaking Changes and Migration Considerations

TypeScript and Browser Support

Angular 11 drops support for TypeScript 3.9, requiring TypeScript 4.0 or higher. This change enables access to newer TypeScript features and performance improvements but requires projects to update their TypeScript dependencies. Additionally, support for Internet Explorer 9, 10, and Internet Explorer Mobile is removed, reflecting the declining usage of these browsers and allowing the framework to focus on modern browser capabilities.

ViewEncapsulation Changes

The ViewEncapsulation.Native option is removed in Angular 11, with developers directed to use ViewEncapsulation.ShadowDom instead. The Angular CLI's ng update command automatically handles this migration for existing projects, replacing the deprecated option with its modern equivalent.

Testing and E2E Changes

Unit testing behavior changes in Angular 11, with attempts to call TestBed.overrideProvider after TestBed initialization now throwing exceptions. Previously, such calls would silently fail, potentially leading to confusing test behavior. This change makes test configuration errors immediately apparent.

For end-to-end testing, Angular 11 removes the automatic generation of Protractor configuration for handling asynchronous operations with SELENIUM_PROMISE_MANAGER. Developers using async/await patterns in their E2E tests need to ensure their Protractor configuration properly handles these scenarios.

Linting Migration

Angular 11 marks TSLint and Codelyzer as deprecated, signaling the framework's transition to ESLint for static analysis. The Angular team has collaborated with the open-source community to develop migration tools, including typescript-eslint, angular-eslint, and tslint-to-eslint-config, to help projects smoothly transition to the new linting stack.

Performance Best Practices for Angular 11

Building upon Angular 11's performance-focused features, developers can implement additional strategies to ensure their applications deliver excellent user experiences. Lazy loading modules remains a fundamental technique, allowing applications to defer loading of non-critical functionality until needed.

Change detection optimization through ChangeDetectionStrategy.OnPush significantly reduces unnecessary rendering cycles, particularly effective in applications with complex component trees. Combined with Angular 11's improved build performance, OnPush components enable applications to maintain smooth performance even as complexity grows.

The trackBy function in ngFor directives prevents unnecessary DOM manipulation when rendering lists, another technique that becomes increasingly important as applications scale. By providing Angular with a consistent identifier for each item in a collection, trackBy enables the framework to update existing DOM nodes rather than recreating them. Our approach to JavaScript framework development incorporates these performance best practices as standard.

For teams exploring modern CSS approaches alongside Angular, our comparison of Tailwind CSS vs Tachyons provides guidance on choosing the right utility-first CSS framework for your project.

Modern Web Development Context

Angular 11's feature set reflects the broader trends in modern web development, particularly the emphasis on build-time optimization and developer experience. The automatic font inlining feature directly addresses Core Web Vitals metrics that increasingly influence search rankings and user experience perceptions. The enhanced HMR support acknowledges that rapid iteration is essential to modern development workflows.

For development teams evaluating frameworks, Angular 11 offers a batteries-included approach with comprehensive tooling, strong TypeScript integration, and a mature ecosystem of libraries and patterns. The framework's opinionated structure provides clear conventions that scale well for large teams and complex applications, while the performance improvements make it competitive with lighter-weight alternatives for many use cases. Whether you choose Angular or Next.js development services, the focus on developer experience and performance remains paramount. Our guide on building Next.js applications with Storybook provides insights into alternative modern framework workflows.

The framework's alignment with TypeScript continues to strengthen, with each release providing better type safety and tooling support. This integration proves particularly valuable in large codebases where type safety and IDE support significantly impact developer productivity and code quality. Understanding these patterns becomes easier with our web workers and TypeScript guide for advanced type-safe concurrent programming techniques.

Getting Started with Angular 11

For new projects, Angular 11's default configuration includes many performance optimizations out of the box. The CLI prompts users about enabling strict mode during project creation, encouraging best practices from the start. For existing projects upgrading from earlier versions, the Angular CLI provides migration schematics that handle many of the breaking changes automatically.

# Update to Angular 11
ng update @angular/cli @angular/core

# Create a new Angular 11 project with strict mode
ng new my-project --strict

The framework's six-month release cadence ensures regular access to new features while maintaining reasonable upgrade paths between versions. This predictable schedule helps organizations plan their technology roadmaps and allocate appropriate time for framework updates.

Conclusion

Angular 11 represents a significant step forward in Google's TypeScript-based framework, focusing on the areas that matter most to development teams: build performance, developer experience, and application stability. The automatic font inlining and enhanced HMR support directly address common pain points in modern web development, while the systematic issue resolution through Operation Byelog demonstrates the Angular team's commitment to maintaining a healthy, responsive project.

For development teams working with Angular, version 11 provides compelling reasons to upgrade, whether through improved development workflow, faster build times, or more robust testing capabilities. The framework continues to evolve in ways that balance innovation with stability, making it a solid choice for projects of any scale.

Sources

1. Angular Minds: Angular 11 Features: Breaking Changes and New Deprecations
2. Radixweb: The Latest Angular Version 11 is Here: Features, Benefits and More
3. Angular Official: Runtime Performance Best Practices
4. Angular Minds: Techniques to Boost Angular Performance