Скачать или смотреть Resolving TypeScript File Transpilation Issues After Angular 9 Upgrade

Discover how to fix the TypeScript transpilation issues related to the `esnext module` upgrade in Angular 9 while maintaining differential loading.
---
This video is based on the question https://stackoverflow.com/q/61461500/ asked by the user 'GoWin' ( https://stackoverflow.com/u/8851497/ ) and on the answer https://stackoverflow.com/a/62283962/ provided by the user 'Mayuree Budhe' ( https://stackoverflow.com/u/10278833/ ) 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: Typescript file stopped getting transpiled post Angular 9 upgrade with esnext module

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.
---
Resolving TypeScript File Transpilation Issues After Angular 9 Upgrade

Upgrading your project can often lead to unexpected issues, especially when it comes to TypeScript files in an Angular project. If you've recently upgraded to Angular 9 and found that your TypeScript file (git-version.ts) stopped getting transpiled, you're not alone. In this guide, we will explore the root causes of this issue and provide a clear solution that helps you maintain the benefits of your new setup.

Background: The Issue at Hand

After the Angular 9 upgrade, your git-version.ts file, which is crucial for your Jenkins CI pipeline, no longer compiles correctly. This file exists outside the src folder and was functioning seamlessly in Angular 7. However, with the introduction of the esnext module loader in Angular 9, you're facing challenges in getting this TypeScript file to work.

Current Project Structure

To give context, here’s a simplified view of your project directory:

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

Key Observations

The TypeScript file was working with the commonjs module system in Angular 7 but breaks in Angular 9's default esnext loading configuration.

Switching back to commonjs allows it to work, but at the cost of losing differential loading benefits crucial for your app's performance.

Attempting to change the file extension to .js results in a syntax error.

Given these observations, it's clear that the handling of module types and where they’re located in the file structure poses a problem.

Solution: Configuring TypeScript Loading for Specific Files

To tackle the issue without losing the benefits of differential loading, you can define a specific loader for your TypeScript file when using ts-node. This will allow you to load git-version.ts using commonjs while your application remains using esnext.

Steps to Implement the Solution

Using ts-node Options:

You can run your git-version.ts file with the following command:

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

This command tells ts-node to compile the file using the commonjs module system specifically for this instance.

Add as an NPM Script:

To make this easier, consider adding this command as an npm script in your package.json:

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

Now, you can simply run npm run get-version to execute the TypeScript file with the correct module.

Integration with Jenkins CI Pipeline:

In your Jenkinsfile, invoke this npm script when needed. This will ensure that the TypeScript file gets the correct transpilation settings without impacting the rest of your Angular app.

Advantages of This Approach

Maintain Differential Loading: By keeping the main application running with esnext, you preserve the performance enhancements introduced in Angular 9.

Custom Loaders for Specific Files: This solution allows flexibility and caters to unique file needs in large projects.

Less Friction in CI Pipeline: Integrating this command into your CI workflow simplifies maintenance and avoids breaking changes.

Conclusion

Updating to a new Angular version can introduce challenges, particularly with TypeScript file handling. By specifying commonjs for your git-version.ts file while maintaining esnext for the rest of your application, you can effectively resolve transpilation issues without sacrificing functionality.

Following the steps mentioned ensures your CI pipeline remains efficient, allowing you to focus on building great features for your Angular application.

Are you facing any other challenges after your Angular upgrade? Let us know in the comments!