What is new in Angular 10 and how to update it.

New Breaking Changes in Angular 10

• Typescript version <= 3.8 are no longer supported. Please update to Typescript 3.9.
• Input fields of type ‘number’ fire the ‘valueChanges’ event only once per value change (as opposed to twice in some cases)
• UrlMatcher can now return ‘null’ values.
• The ‘minLength’ and ‘maxLength’ validation only validate values that have a numeric length property.

Angular Update Guide 9.0 -> 10.0 for Basic Apps

Before Updating

• If you depend on many Angular libraries you may consider speeding up your build by invoking the ngcc (Angular Compatibility Compiler) in an npm postinstall script via small change to your package.json.
• Angular 9 introduced a global $localize() function that needs to be loaded if you depend on Angular's internationalization (i18n). Run ng add @angular/localize to add the necessary packages and code modifications. Consult the $localize Global Import Migration guide to learn more about the changes.
• Update stable node version in angular application, use node 12.

During the Update

• Make sure you are using node 12.0 or later version.
• Run below command which should bring you to version 10 of Angular.

ng update @angular/core @angular/cli

• New projects use the filename .browserslistrc instead of browserslist. ng update will migrate you automatically.
• If getting error in sass then install “sass-lint-auto-fix” and run to fix sass errors.

After the Update

There aren't currently any changes needed after moving between these versions.

Angular Update Guide 8.0 -> 10.0 for Basic Apps

Warning: We do not recommend moving across multiple major versions.

Before Updating

• Make sure you are using dynamic imports. Importing via string is removed in v9. ng update should take care of this automatically.

During the Update

• Make sure you are using node 12.0 or later version.
• Run ng update @angular/core@8 @angular/cli@8 in your workspace directory to update to the latest 8.x version of @angular/core and @angular/cli and commit these changes.
• Run ng update @angular/core@9 @angular/cli@9 which should bring you to version 9 of Angular.
• Now project updated to typeScript 3.8. read more about new compiler and fix errors.
• If your project depends on other Angular libraries, we recommend that you consider updating to their latest version. In some cases this update might be required in order to resolve API incompatibilities. use ng update or npm outdated to learn about your outdated libraries.
• Angular 9 introduced a global $localize() function that needs to be loaded if you depend on Angular's internationalization (i18n). Run ng add @angular/localize to add the necessary packages and code modifications. Consult the $localize Global Import Migration guide to learn more about the changes.
• Run ng update @angular/core @angular/cli which should bring you to version 10 of Angular.
• New projects use the filename .browserslistrc instead of browserslist. ng update will migrate you automatically.
• Angular now recommends the use of a tsconfig.base.json to help organize the various typings contexts (shared, unit tests, end to end tests, application, etc). ng update will migrate you automatically.

After the Update

There aren't currently any changes needed after moving between these versions.

Packages like this are making trouble while updating version

1. bugsang/js
2. syncfusion/ej2-angular-grids
3. ngx-gallery

Solution

Update package versions that might resolve errors or find similar package like use ngx-gallery-9 instead of ngx-gallery.

Conclusion

In this blog we were introduced how to update angular version for basic applications. You can take a look at the docs here. Happy Coding!

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.