The new version of Angular, Angular v10 is officially available since June 25, 2020. With this new update of the framework, the Angular team continues to improve the framework and offers updates to the ecosystem, but also a review of various points that I present to you in this article.
Since the release of Angular 2, updates to the framework have become much more frequent. Indeed, the Angular team regularly offers updates to the framework, almost every 6 months.
This makes it possible to keep the framework “up to date” without causing any problem such as the switch from v1 to v2 of Angular which are two completely different frameworks (Angular JS to Angular 2).
The lack of regular updates caused a lot of damage to the framework which lost many developers who switched to React at this time, deeming the latter more “stable” and better “maintained”.
The Angular team quickly understood its mistake and has since been offering a regular update that gradually implements the corrections and improvements due to changes in language and possibilities.
Thus, switching from one version of Angular to another is much easier for the developer and takes less time to complete.
Now, let’s take a look at the main changes in version 10 of Angular.
TypeScript updated to TypeScript 3.9
TSLib has been updated to version 2.0
TSLint has been updated to v6
You will also see a new tsconfig.base.json file. This additional tsconfig.json file better supports how the IDEs and build tools resolve type and package configurations.
CommonJS imports Warnings
When you use a dependency provided with CommonJS, it can result in slower applications.
With this update, Angular CLI displays a warning when the build integrates one of these bundles.
If you start to see warnings for your dependencies, tell your dependencies that you prefer to use a set of ECMAScript (ESM) modules.
Optional Stricter Settings
With Angular version 10, you can configure your project in Strict mode when you create a new workspace with ng new.
ng new MyApp --strict
Enabling this flag initializes your project with a few new settings that improve maintainability, help detect bugs ahead of time, and allow Angular CLI to perform advanced optimizations on the application.
More specifically, the strict indicator does the following:
- Enable strict mode in TypeScript
- Turn model type checking to Strict
- Default grouped budgets have been reduced by approximately 75%
- Configure linting rules to prevent any type declarations
- Configures your application as without side effects to allow more advanced tree-shaking
New default configuration for Browsers
Angular has updated the browser configuration for new projects to exclude older and less used browsers.
This has the side effect of disabling ES5 versions by default for new projects.
To enable ES5 versions and differential loading for browsers that need it (like IE or UC Browser), simply add the browsers you need in the .browserslistrc file at the root of the project.
Deprecations and Removals
Angular package format no longer includes ESM5 or FESM5 bundles, this saves 119MB of download and installation time when running Yarn or NPM install for Angular packages and libraries .
These formats are no longer needed, as any downgrade to support ES5 is done at the end of the build process.
Based on extensive consultations with the community, the Angular team advises against support for older browsers, including IE 9, 10 and Internet Explorer Mobile.
You can find out more about deprecations and deletions on this link:
New Date Range Picker Angular Material
Also a nice update to the Material package from Angular with the modification of the Date Picker.
How to update Angular 10
Visit update.angular.io for detailed information and advice.
To have the best updating experience, I recommend that you always upgrade one major version at a time.