Angular 10 is now available. Here’s what you need to know
Tags: angular
Published: 2020-07-17 15:29:10

---
title: Angular 10 is now available. Here’s what you need to know
published: true
date: 2020-07-13 17:30:17 UTC
tags: angular
canonical_url: https://blog.logrocket.com/angular-10-is-now-available-heres-what-you-need-to-know/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/75slvyodd602ext85me9.png
---
**Written by [Godwin Ekuma](https://blog.logrocket.com/author/godwinekuma/)**✏️

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.

## New features in Angular 10

The following features were introduced with the latest Angular release.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### CommonJS import warnings

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](https://web.dev/commonjs-larger-bundles/).

Angular version 10 now warns you when your build pulls in a CommonJS module.

![CommonJS Warning](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/07/commonjs-warning.png?resize=720%2C160&ssl=1)

### Angular in strict mode

In version 10, you can set up new projects with stricter settings using the `--strict` flag.

```jsx
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.

- Enables strict mode in TypeScript
- Turns template type checking to `Strict`
- Reduces default bundle budgets by as much as 75 perceng
- Configures linting rules to [prevent declarations of type `any`](https://palantir.github.io/tslint/rules/no-any/)
- Configures your app as side-effect free to enable more advanced tree-shaking

### Updated browser support

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.

## Breaking changes

Below is an overview of notable breaking changes associated with Angular 10.

### New TypeScript version

[TypeScript](https://blog.logrocket.com/tag/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`.

### Improvement on input field of type `number`

Prior to version 10, input fields of type [`number`](https://angular.io/api/common/DecimalPipe) 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`](https://angular.io/api/common/DecimalPipe) fire the `valueChanges` event only once per value change.

### `minLength` and `maxLength` form validators

Previously, 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.

### Unknown properties and elements error

Templates with unknown property bindings or element names now log errors instead of warnings. This won’t break your app, but it may trip up tools that expect nothing to be logged via `console.error`.

### `UrlMatcher` now returns `null`

`UrlMatchResult`, which is the return type for `UrlMatcher`, now supports `null`.

### Navigation cancellation for at least one `EMPTY` resolver.

When a route that has a single resolver resolves with an empty observables (no next, only complete, as in `EmptyObservable`), navigation is canceled.

For multiple resolver routes, empty observables are treated differently than with a single resolver. If, for example, one of two resolvers resolves to an empty observable, the navigation is not canceled, but the corresponding route-data field is undefined as a result.

This is no longer the case in Angular version 10. If at least one resolver resolves with an empty observable, navigation is canceled.

## Updating to Angular 10

To update to Angular 10:

```jsx
ng update @angular/cli @angular/core
```

Consult the [Angular Update Guide](https://update.angular.io/) for detailed information on installing Angular 10.

* * * 
## Experience your Angular apps exactly how a user does 

Debugging Angular applications can be difficult, especially when users experience issues that are difficult to reproduce. If you're interested in monitoring and tracking Angular state and actions for all of your users in production, [try LogRocket.](logrocket.com/signup)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qrpofyuvt10zrrkeqodr.png)

[LogRocket](logrocket.com/devto) is like a DVR for web apps, recording literally everything that happens on your site including network requests, JavaScript errors, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. 

The LogRocket NgRx plugin logs Angular state and actions to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred. 

Modernize how you debug your Angular apps – [Start monitoring for free.](logrocket.com/signup)
* * * 

The post [Angular 10 is now available. Here’s what you need to know](https://blog.logrocket.com/angular-10-is-now-available-heres-what-you-need-to-know/) appeared first on [LogRocket Blog](https://blog.logrocket.com).