Solving Angular 9 to 10 Upgrade: Addressing TypeScript Compilation Warnings

Описание: Discover how to effectively resolve TypeScript compilation warnings when upgrading Angular 9 to 10 without disabling Ivy.
---
This video is based on the question https://stackoverflow.com/q/63385868/ asked by the user 'Mbk' ( https://stackoverflow.com/u/8436445/ ) and on the answer https://stackoverflow.com/a/63453816/ provided by the user 'Mbk' ( https://stackoverflow.com/u/8436445/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular 9 to 10 upgrade - Typescript compilation warnings : *.ngtypecheck.ts

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Solving Angular 9 to 10 Upgrade: Addressing TypeScript Compilation Warnings

Upgrading your Angular application from version 9 to 10 can introduce some unexpected challenges. One of the most common issues faced by developers is encountering TypeScript compilation warnings, specifically related to unused files in your project. If you've recently upgraded and run into the message stating that specific files are part of the TypeScript compilation but are not being used, you're in the right place to find a solution.

Understanding the Challenge

After moving from Angular 9 to 10, many users notice colors of warnings when they execute ng build --prod. The warnings typically indicate that there are TypeScript files within your project that, while included in the compilation process, are deemed unused. Here's a detailed look at what’s happening:

Affected Files: The warnings indicate that certain TypeScript files (ending in .ts) are included but not utilized in your application.

Default Configuration Issues: With Angular 10, the underlying configurations and rules surrounding TypeScript compilation may have shifted, leading to these warnings.

Reaching for Workarounds: While some may resort to workarounds, such as disabling Ivy, this is not always desirable or feasible.

Steps to Resolve TypeScript Compilation Warnings

Here are some effective methods to resolve these TypeScript compilation warnings following an upgrade.

1. Rollback and Re-Upgrading

One simple yet often overlooked solution is to rollback and then re-upgrade the Angular application. The steps are as follows:

Rollback: Revert your application back to Angular 9.

Automatic Migrations: Upgrade to Angular 10 again using automatic migrations. This approach will help ensure that your configuration files (tsconfig in particular) get updated properly.

Check for Warnings: After successfully upgrading, run the ng build --prod command again to see if the warnings persist.

2. Fixing the extends Option

If you prefer not to roll back, focusing on the extends property in your tsconfig files can also make a significant difference.

Edit your tsconfig.app.json and ensure that you have the extends property set properly:

[[See Video to Reveal this Text or Code Snippet]]

This will help your configuration inherit the necessary properties and may resolve the warnings you’re facing.

3. Modifying include Properties

While you previously tried adjusting the include properties in your tsconfig.app.json, ensure you're only including essential paths, like:

[[See Video to Reveal this Text or Code Snippet]]

This jerking back to basics can help TypeScript compile only what is necessary.

Conclusion

Upgrading Angular applications can often present unanticipated challenges, particularly regarding TypeScript compilation. Understanding the new rules and adjusting your configuration carefully can help alleviate these issues without compromising functionality, such as Ivy.

Stay diligent in managing your configurations, and if problems arise, don't hesitate to try rolling back or adjusting the extends property in your tsconfig. Keep your code clean, and your upgrade process will become a seamless part of your development routine.

By following these steps, you should find a satisfactory solution to the TypeScript compilation warnings that come with upgrading to Angular 10. Happy coding!