Angular 10 is now officially available, and it’s getting better and better. I have written a tutorial on how to upgrade to Angular 10. If you don’t know, then please check out.
Angular 10 has the following version of its dependencies.
- rxjs 6.5.5
- typescript 3.9.5
- webpack 4.43.0
This release is smaller than usual; it has only been four months since we released version 9.0 of Angular.
How to Install Angular 10
If you have not installed Angular previously, then you can install the Angular CLI using the following command.
npm install @angular/cli@next -g
This will install the CLI, and now to create a new Angular 10 project, you have to type the following command.
ng new angular10tutorial
This will create a brand new Angular 10 project.
Angular 10 New Features and Updates
Angular 10 comes up with New Date Range Picker.
Angular Material now includes the new date range picker.
To use a new date range picker, you can use a mat-date-range-input and mat-date-range-picker components.
You can see the new Date Range Datepicker example on StackBlitz.
Warnings about CommonJS imports
When you use the dependency that is packaged with CommonJS, it can result in larger, slower applications.
Starting with Angular version 10, the angular engine now warns you when you build pulls in one of these bundles.
If you have started seeing these warnings for your dependencies, let your dependency know that you would prefer an ECMAScript module (ESM) bundle.
When you run a command ng build –prod command, and if you are using CommonJS, then it will warn us. This also has a side effect of disabling ES5 builds by default for new projects.
To enable the ES5 builds and differential loading for the browsers that need it (such as IE or UC Browser), you just have to add the browsers you need to support in the .browserslistrc file.
Keeping Up to Date with the Ecosystem
As usual, the Angular team has made a few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.
- Angular now uses TypeScript 3.9, an improved version of TypeScript.
- TSLib has been updated to v2.0.
- TSLint has been updated to v6.
They have also updated our project layout.
Starting with version 10, you will see the new tsconfig.base.json. This extra tsconfig.json file better supports the way that IDEs(Webstorm) and build tooling resolve type and package configurations.
New Default Browser Configuration
They have updated the browser configuration for new projects to exclude older and less used browsers.
To view the browserslist, type the following code.
npx browserslist chrome 83 edge 83 edge 81 firefox 77 firefox 68 ios_saf 13.4-13.5 ios_saf 13.3 ios_saf 13.2 ios_saf 13.0-13.1 ios_saf 12.2-12.4 ios_saf 12.0-12.1 safari 13.1 safari 13 safari 12.1 safari 12
Optional Stricter Settings
Angular 10 offers a more strict project setup when you create a new workspace with ng new.
ng new --strict
Enabling this flag to initializes your new project with a few new settings can improve maintainability, help you catch bugs ahead of time, and enable an Angular CLI to perform advanced optimizations on our app. The strict flag does the following:
- It enables the strict mode in TypeScript.
- Turns template type checking to Strict.
- The default bundle budgets have been reduced by ~75%.
- It configures linting rules to prevent declarations of type any.
- It configures your app as side-effect free to enable more advanced tree-shaking.
Deprecations and Removals
The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running the yarn or npm install for Angular packages and libraries.
These formats are no longer needed as any down leveling to support ES5 is done at the end of the build process.
Based on heavy consultation with the community, we are deprecating support for older browsers, including IE 9, 10, and Internet Explorer Mobile.
That is it for this Angular 10 New Features And Updates article.
