Resolving TypeScript Compilation Warnings: Unused .ts Files Issue

In Angular development, after upgrading to new versions, developers may encounter various compilation warnings, one of which is a TypeScript compilation warning indicating that certain .ts files are included in the compilation process but are not actually used. This warning often appears in Angular 9 and above, especially when routing functionality is not utilized in the project. This article builds on a specific case study to delve into the root causes of this issue, provide solutions, and discuss best practices for TypeScript configuration.

Problem Background and Warning Analysis

When developers upgrade an Angular project to version 9.0.0-next.4, they might see the following warning during the build process: WARNING in src/war/angular/src/app/app-routing.module.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig. This warning indicates that the app-routing.module.ts file is included by the TypeScript compiler, but since routing is not used in the project, the file is not referenced during compilation, leading to redundancy. The core issue lies in the TypeScript compilation configuration, particularly improper settings of the files and include properties in tsconfig.json or its derivative files.

TypeScript Compilation Configuration Explained

In Angular projects, TypeScript compilation is configured through the tsconfig.json file. Angular CLI typically generates multiple tsconfig files, such as tsconfig.app.json for application builds and tsconfig.spec.json for testing. These files inherit from the root tsconfig.json and can override or extend its settings. Key properties include:

• files: Specifies an explicit list of files to compile, suitable for scenarios with clear entry points.
• include: Uses glob patterns to match files for compilation, e.g., "src/**/*.ts" includes all .ts files in the src directory.
• exclude: Excludes specific files or directories, but note that it has lower priority than include.

In the provided case, tsconfig.app.json might contain an include pattern like "src/**/*.ts", causing all .ts files to be compiled, including unused ones like app-routing.module.ts. This violates TypeScript best practices, which advocate compiling only necessary files to improve build efficiency and reduce warnings.

Solution: Modifying tsconfig.app.json

According to the best answer, the key to resolving this warning is adjusting the configuration in tsconfig.app.json. There are two main approaches:

1. Remove Unnecessary Include Patterns: If tsconfig.app.json includes "src/**/*.ts", it should be removed to avoid compiling all .ts files. For example, a modified configuration might look like:

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "outDir": "./out-tsc/app",
       "types": []
     },
     "files": [
       "src/main.ts",
       "src/polyfills.ts"
     ],
     "include": [
       "src/**/*.d.ts"
     ]
   }

   Here, the files property specifies entry points main.ts and polyfills.ts, while include only includes type definition files, thus precisely controlling the compilation scope.
2. Explicitly Specify Files Entry Points: As an alternative, rely entirely on the files property to list all files to compile, without using include. For example:

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "outDir": "./out-tsc/app",
       "types": []
     },
     "files": [
       "src/main.ts",
       "src/polyfills.ts"
     ]
   }

   This method is more direct but requires ensuring all dependency files are implicitly or explicitly included.

After implementing these changes, rerun the build command (e.g., ng build), and the warning should disappear. If the project uses Angular CLI's default configuration, tsconfig.app.json is usually auto-generated, but upgrades may leave old settings, so manual checks are necessary.

Supplementary Insights from Other Answers

Other answers provide additional perspectives:

• Answer 2 emphasizes the use of the files property and notes that file paths are relative to tsconfig.app.json. This reminds developers to ensure path correctness in configuration.
• Answer 3 discusses warnings about environment files when upgrading from Angular 8 to 9 and recommends running ng update to auto-update configurations. It also mentions that in Angular 9.1.x, some configurations might no longer be needed, otherwise causing test issues. This highlights version differences and the importance of automation tools.

Overall, the core principle is to keep compilation configurations concise and targeted. Avoid overusing glob patterns and instead explicitly specify compilation entries based on the project structure. In the Angular ecosystem, following CLI-recommended configurations can reduce such issues.

Best Practices and Conclusion

To avoid similar warnings, developers should adopt the following measures:

• Regularly review TypeScript configuration files to ensure files and include properties only contain necessary files.
• When upgrading Angular versions, use the ng update command for automatic configuration migration to minimize manual errors.
• Understand project structure: If routing is not used, consider deleting the app-routing.module.ts file or ensure it is not included in compilation.
• Monitor build outputs and address warnings promptly to maintain code quality.

Through this analysis, developers can gain a deeper understanding of TypeScript compilation mechanisms and effectively resolve configuration warnings in Angular projects. This not only enhances build efficiency but also promotes cleaner code management practices.