In this article, we will highlight all the Major Changes in the new Angular 10 release. This is a major release that has made changes to the entire platform, including the framework itself, Angular Material, and the CLI. If you want a more in-depth of this you could check out the Angular official documentation.
Optional Stricter Settings
The New Angular version 10 comes with a more strict project setup when you create a new workspace with ng new. To set up a project using the strict mode you can run :
ng new --strict
Adding the strict flag turns template type checking to Strict mode and configure the major linting rule. The also improves maintainability, helps catch bugs ahead of time, and allows the CLI to perform advanced optimizations on your application.
Support For TypeScript 3.9.x
This new version comes with support for Typescript 3.9.x and other improvements in the compiler CLI, type-checking in the application is faster than ever with this new support, which should be positive for most projects out there; especially larger ones.
Now Angular 10 is rated the best framework for building larger applications. This upgrade has also dropped support for TS 3.6, 3.7, and 3.8.
This new release also came with an upgrade on TSLib 2.0.TSLib is an official library providing TypeScript helper functions that can be used at runtime.
The default project layout has also been updated. A tsconfig.base.json file has been added to improve better supports the way that IDEs and build tooling resolve type and package configurations:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./e2e/tsconfig.json"
}
]
}
This tsconfig.base.json file will only include ./node_modules/@types/node, ./node_modules/@types/lodashand ./node_modules/@types/express. Other packages under node_modules/@types/* will not be included.
A type package is a folder with a file called index.d.ts or a folder with a package.json that has a type field.
I18N/L10N
In the Previous angular Versions, only one translation file was supported per locale. Now, it is possible to specify multiple files for each locale. All of those then get merged by message-id.
But most developers make use of the ngx-translate for internalization.
Better Browser Configuration
This new version has updated browser configuration for new projects to exclude older and less used browsers for scalability purposes.
This has the side effect of disabling ES5 builds by default for new projects.
To enable ES5 builds and differential loading for browsers that require it (such as Internet Explorer or UC Browser), simply add some configs the .browserslistrc file to add any browser of your choice.
Depreciated Modules and Packages
This new Version has depreciated and removed some modules too.
The Version no longer includes ESM5 or FESM5 bundles support, saving about 119MB of download and install time when running yarn or npm install for Angular packages and libraries.
This basically helps reduces installation time when setting up a new project. These formats are no longer needed as any down leveling to support ES5 is done at the end of the build process.
Older browsers no longer have supports due to the new improvements added
How To Upgrade To Angular 10
Upgrading to Angular 10 is quite easy. To have the best update experience, we recommend always upgrading one major release at a time.
For instance, don’t directly upgrade from Angular 7 to Angular 10. A whole lot of modules have been depreciated. Rather what you can do is to upgrade them step by step, from V7 to V8 and from V8 to V9 and so on.
To update your project run this on your terminal:
ng update @angular/cli @angular/core\
This will update the Angular core and the Angular CLI
Additions
If you are looking forward to the best Angular 10 Templates, you could get them at WrapPixel. The templates Have good code structures and follow best practices too. For various and amazing Angular Templates.