Staying Ahead of the Curve: What’s New in Angular 10
The Angular team is committed to keeping pace with the rapidly evolving JavaScript ecosystem, releasing two major versions each year. Hot on the heels of version 9, Angular 10 has arrived, packed with exciting new features, significant breaking changes, and deprecated APIs. In this comprehensive guide, we’ll dive into the key updates and explore how they’ll impact your existing code.
New Features in Angular 10
Several innovative features have been introduced in Angular 10, designed to enhance performance, maintainability, and overall development experience.
CommonJS Import Warnings
Angular 10 now issues warnings when your build pulls in a CommonJS module, helping you avoid larger code bundles and slower applications.
Angular in Strict Mode
With the --strict flag, you can set up new projects with stricter settings, enabling advanced optimizations, improving maintainability, and catching bugs early. This optional setting:
- Enables strict mode in TypeScript
- Turns template type checking to Strict
- Reduces default bundle budgets by up to 75%
- Configures linting rules to prevent declarations of type any
- Configures your app as side-effect free to enable more advanced tree-shaking
Updated Browser Support
Angular 10 has discontinued support for older and less popular browsers, such as IE and UC browsers, and disabled ES5 builds for new projects. If you still need support for older browsers, simply add them to the .browserslistrc file.
Breaking Changes in Angular 10
Several notable breaking changes have been introduced in Angular 10, including:
New TypeScript Version
Angular 10 now supports TypeScript 3.9, and Typescript 3.8 and 3.7 are no longer supported. Other dependencies, such as TSLib and TSLint, have also been updated to versions 2 and 6, respectively.
Improved Input Field of Type Number
Input fields of type number now fire the valueChanges event only once per value change, eliminating the previous double firing issue.
* minLength and maxLength Form Validators*
These validators now correctly verify that a value has a numeric length property before invoking validation.
Unknown Properties and Elements Error
Templates with unknown property bindings or element names now log errors instead of warnings, ensuring a more robust development experience.
UrlMatcher Returns Null
The UrlMatchResult now supports null, providing more flexibility in route configuration.
Navigation Cancellation
When a route has a single resolver that resolves with an empty observable, navigation is canceled. This behavior has been updated to ensure consistency across multiple resolvers.
Upgrading to Angular 10
To take advantage of the latest features and improvements, follow the Angular Update Guide for a seamless transition to Angular 10.