What Is New in Angular 10.0
Angular 10.0 is a major release spanning the entire platform, including the framework, CLI, and components. This update focuses on improving quality, addressing common issues, and keeping the ecosystem current.
| Category | Key Changes |
|---|---|
| New Features | Optional stricter settings, new Date Range Picker for Material |
| Improvements | Enhanced TypeScript performance, updated TS libs, new default browser configuration |
| Bug Fixes | Over 400 issues resolved across the framework and tooling |
| Deprecations | Older IE support via View Engine is deprecated |
How does Angular 10 improve TypeScript development?
Angular 10 now requires TypeScript 3.9 and updates to TS lib files like lib.dom.d.ts. This matters because it improves type checking and automatically resolves many breaking declarations that developers previously had to work around manually.
In practice, you'll get better IntelliSense and more accurate compilation. The update also brings performance improvements to ngc, making rebuilds faster.
What are the new stricter compiler settings?
A new strictTemplates flag enables more rigorous template type checking. When you set strictTemplates: true in your angularCompilerOptions, the compiler performs deeper type analysis within your HTML templates.
This helps catch bugs earlier, like incorrect event bindings or wrong input types. You can gradually adopt this by enabling it and suppressing specific errors until your codebase is fully compliant.
What updates were made to Angular Material?
The most visible change is the new Date Range Picker component (<mat-date-range-picker>). This was a highly requested feature that allows users to select a start and end date from a calendar interface.
Several existing components also received updates. For instance, the Material tabs now include a new preserveContent property that prevents unused tabs from being destroyed when they are not active, which can improve performance.
How has the Angular CLI been enhanced?
The CLI now uses TSLint 6 by default and includes a new --resolveJsonModule flag for the ng serve command to help with importing JSON files. More significantly, the default browser support has been updated.
The new browserlist configuration excludes older browsers like IE 9, 10, and Internet Explorer Mobile by default. This lets the CLI generate more modern, smaller bundles unless you explicitly target those older environments.
What breaking changes should I watch for?
Several changes might require action during an update. The ModuleWithProviders type now requires a generic, so code like ModuleWithProviders must become ModuleWithProviders<MyModule>.
Angular also made a breaking change in the meaning of --prod for lazy-loaded CSS. Previously, the command ng build --prod would extract lazy CSS into separate files. Now, it is always inlined in JavaScript, which simplifies the build process but changes the output.
FAQ
Is Internet Explorer still supported in Angular 10?
Yes, but support is deprecated for the old View Engine compiler. Ivy, the new compilation pipeline, does not support IE 9, 10, or IE Mobile. You can still use View Engine to target these browsers, but it's recommended to move towards modern browser targets.
How do I update my project to Angular 10?
Use the command ng update @angular/core @angular/cli. The CLI's update tool will handle most of the changes, including updating your tsconfig.json and migrating known breaking changes.
What happened to the old TSLint configuration?
Angular 10 moves to TSLint 6, which has a slightly different ruleset. After updating, run ng lint to see if your code still passes. You might need to adjust your tslint.json rules to match the new defaults.
Why is my lazy-loaded CSS now inlined?
This is a deliberate change to simplify the build output and make the behavior consistent. The --prod flag no longer extracts lazy CSS to separate files. If you relied on the old behavior, you'll need to adjust your deployment strategy.
Should I enable strictTemplates immediately?
It's a powerful tool for catching bugs, but it can generate many errors in an existing project. It's often best to enable it and then use the // @ts-ignore suppressions on a case-by-case basis to gradually fix your codebase over time.