To stay synchronized with the JavaScript ecosystem, the Angular team makes a point to release two major versions each year. A mere four months after the release of version 9, the team recently unleashed Angular 10, which comes complete with new features, breaking changes, and deprecated APIs.
In this guide, we’ll break down the new features and the walk through any breaking changes that may affect your current code.
The following features were introduced with the latest Angular release.
CommonJS was originally designed for server-side modules, not to reduce the production bundle size. Using dependencies packaged with CommonJS can result in larger code bundles and slower applications.
Angular version 10 now warns you when your build pulls in a CommonJS module.
In version 10, you can set up new projects with stricter settings using the --strict
flag.
ng new --strict
These optional settings help improve maintainability, catch bugs ahead of time, and allow the Angular CLI to perform advanced optimizations on your app.
Specifically, the strict
flag does the following.
Strict
any
Angular 10 discontinued support for older and less popular browsers, such as IE abd UC browsers. It also disabled ES5 builds for new projects.
If you still want support for older browsers, simply add them to the .browserslistrc
file.
Below is an overview of notable breaking changes associated with Angular 10.
TypeScript is one of the major dependencies of the Angular framework. Angular 10 comes with support for Typescript 3.9. Typescript 3.8 and Typescript 3.7 are no longer supported.
Other dependencies, such as TSLib and TSLint, were also updated to versions 2 and 6, respectively.
In addition, to better support the way IDEs and build tools resolve type and package configurations, the Angular team added a new TypeScript configuration file called tsconfig.base.json
.
number
Prior to version 10, input fields of type number
fired the valueChanges
event twice: the first time after typing in the input field and the second time when the input field loses the focus.
In this new version, input fields of type number
fire the valueChanges
event only once per value change.
minLength
and maxLength
form validatorsPreviously, the behavior of the minLength
and maxLength
form validators caused confusion, making it appear as though they work with numeric values. These validators now verify that a value has a numeric length
property and invoke validation only if that’s the case.
#angular #javascript #developer